/* =========================================================
   Sistema de Rodamientos - Sudamerica
   Tema: Rojo y Plomo (gris)
   ========================================================= */

:root {
    --rojo: #b5121b;
    --rojo-oscuro: #7e0c13;
    --rojo-claro: #e63946;
    --plomo-oscuro: #2b2d30;
    --plomo: #3c3f44;
    --plomo-medio: #565a60;
    --plomo-claro: #d8dadd;
    --gris-fondo: #f2f2f3;
    --blanco: #ffffff;
    --texto: #2b2d30;
    --sombra: 0 2px 10px rgba(0, 0, 0, 0.12);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: var(--gris-fondo);
    color: var(--texto);
}

a { text-decoration: none; color: inherit; }

/* ---------- LOGIN ---------- */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--plomo-oscuro) 0%, var(--rojo-oscuro) 100%);
    padding: 20px;
}

.login-box {
    background: var(--blanco);
    width: 100%;
    max-width: 380px;
    padding: 40px 32px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    text-align: center;
}

.login-box h1 {
    color: var(--rojo);
    font-size: 22px;
    margin-bottom: 4px;
}

.login-box p.subt {
    color: var(--plomo-medio);
    font-size: 13px;
    margin-bottom: 24px;
}

.login-box .icono {
    width: 60px;
    height: 60px;
    background: var(--rojo);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
    font-size: 26px;
    font-weight: bold;
}

.form-group { text-align: left; margin-bottom: 16px; }
.form-group label {
    display: block;
    font-size: 13px;
    color: var(--plomo);
    margin-bottom: 6px;
    font-weight: 600;
}

.form-group input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--plomo-claro);
    border-radius: 6px;
    font-size: 14px;
    background: var(--gris-fondo);
    transition: border-color .2s;
}
.form-group input:focus {
    outline: none;
    border-color: var(--rojo);
    background: #fff;
}

.btn {
    display: inline-block;
    padding: 11px 20px;
    border: none;
    border-radius: 6px;
    background: var(--rojo);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.btn:hover { background: var(--rojo-oscuro); }
.btn-full { width: 100%; }
.btn-secundario { background: var(--plomo-medio); }
.btn-secundario:hover { background: var(--plomo-oscuro); }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-peligro { background: var(--rojo); }
.btn-peligro:hover { background: var(--rojo-oscuro); }

.alerta {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 16px;
    text-align: left;
}
.alerta-error { background: #fdecec; color: var(--rojo-oscuro); border: 1px solid #f3c2c5; }
.alerta-ok { background: #eaf7ee; color: #1e7a3c; border: 1px solid #bfe7cb; }

/* ---------- LAYOUT PRINCIPAL ---------- */
.topbar {
    background: var(--plomo-oscuro);
    color: #fff;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--sombra);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar .marca {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 17px;
}

.topbar .marca span.punto {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--rojo);
    display: inline-block;
}

.topbar .usuario-info {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
}

.topbar .usuario-info .btn {
    padding: 7px 14px;
}

.contenedor {
    max-width: 1400px;
    margin: 24px auto;
    padding: 0 20px;
}

.tarjeta {
    background: #fff;
    border-radius: 10px;
    box-shadow: var(--sombra);
    padding: 22px;
    margin-bottom: 20px;
}

.tarjeta h2 {
    margin-top: 0;
    color: var(--rojo);
    font-size: 18px;
    border-bottom: 2px solid var(--plomo-claro);
    padding-bottom: 10px;
    margin-bottom: 18px;
}

/* ---------- BARRA DE BUSQUEDA ---------- */
.buscador {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.buscador input[type="text"] {
    flex: 1;
    min-width: 240px;
    padding: 12px 14px;
    border: 2px solid var(--plomo-claro);
    border-radius: 8px;
    font-size: 14px;
}
.buscador input[type="text"]:focus {
    outline: none;
    border-color: var(--rojo);
}

.ayuda-busqueda {
    font-size: 12.5px;
    color: var(--plomo-medio);
    margin-top: 8px;
}
.ayuda-busqueda code {
    background: var(--gris-fondo);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--rojo-oscuro);
}

/* Filtros dedicados de medida (INT/EXT/ALT): campos chicos con su
   etiqueta arriba, en fila, para filtrar por una sola dimensión sin
   tocar la caja de búsqueda general. */
.filtro-medidas {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 6px;
}
.filtro-medidas-campo {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.filtro-medidas-campo label {
    font-size: 11px;
    font-weight: 700;
    color: var(--plomo-medio);
    text-transform: uppercase;
    letter-spacing: .3px;
}
/* Más específico que ".buscador input[type=text]" a propósito: estos
   campos son chicos (solo llevan un número), no deben heredar el
   min-width de 240px pensado para la caja de búsqueda general. */
.filtro-medidas input[type="text"] {
    width: 90px;
    min-width: 0;
    flex: none;
    padding: 9px 10px;
    font-size: 14px;
    border: 2px solid var(--plomo-claro);
    border-radius: 8px;
}
.filtro-medidas input[type="text"]:focus {
    outline: none;
    border-color: var(--rojo);
}

.info-resultados {
    font-size: 13px;
    color: var(--plomo-medio);
    margin: 10px 0;
}

/* ---------- TABLA ---------- */
.scroll-hint {
    font-size: 12px;
    color: var(--plomo-medio);
    margin-bottom: 6px;
}

.tabla-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--plomo-claro);
    cursor: grab;
}
.tabla-wrap.arrastrando {
    cursor: grabbing;
    user-select: none;
}

table.tabla-datos {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    white-space: nowrap;
}

table.tabla-datos thead th {
    background: var(--plomo);
    color: #fff;
    padding: 10px 12px;
    text-align: left;
    position: sticky;
    top: 0;
}

table.tabla-datos tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--plomo-claro);
}

table.tabla-datos tbody tr:nth-child(even) { background: var(--gris-fondo); }
table.tabla-datos tbody tr:hover { background: #fbe3e4; }

td.acciones { display: flex; gap: 6px; }

.badge {
    background: var(--rojo);
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}

/* ---------- PAGINACION ---------- */
.paginacion {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 18px;
    justify-content: center;
}
.paginacion a, .paginacion span {
    padding: 8px 13px;
    border-radius: 6px;
    background: var(--plomo-claro);
    color: var(--plomo-oscuro);
    font-size: 13px;
    font-weight: 600;
}
.paginacion a:hover { background: var(--rojo); color: #fff; }
.paginacion .activo { background: var(--rojo); color: #fff; }

/* ---------- FORMULARIOS (agregar/editar) ---------- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 900px) {
    .form-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .form-grid { grid-template-columns: 1fr; }
}

.form-grid .form-group input, .form-grid .form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--plomo-claro);
    border-radius: 6px;
    font-size: 13.5px;
}
.form-grid .form-group input:focus, .form-grid .form-group textarea:focus {
    outline: none;
    border-color: var(--rojo);
}

.acciones-form {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

.top-acciones {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}

.sin-resultados {
    text-align: center;
    padding: 40px 20px;
    color: var(--plomo-medio);
}

/* ---------- ESTADISTICAS ---------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 768px) {
    .stats-grid { grid-template-columns: 1fr; }
}
.stat-box {
    background: var(--gris-fondo);
    border-left: 4px solid var(--rojo);
    border-radius: 8px;
    padding: 14px 18px;
}
.stat-num {
    font-size: 26px;
    font-weight: 700;
    color: var(--plomo-oscuro);
}
.stat-label {
    font-size: 12.5px;
    color: var(--plomo-medio);
    margin-top: 2px;
}

/* botón dentro de un <form> en línea, mismo estilo que un <a class="btn"> */
td.acciones form { margin: 0; }
td.acciones button.btn { cursor: pointer; }

/* =========================================================
   RESPONSIVE - CELULAR / TABLET
   ========================================================= */

/* Tablet: menos padding general, topbar más compacto */
@media (max-width: 900px) {
    .contenedor { padding: 0 14px; margin: 16px auto; }
    .tarjeta { padding: 16px; }
    .topbar { padding: 12px 16px; }
}

/* Celular: se apilan encabezado, buscador y acciones; botones más
   fáciles de tocar con el dedo; inputs a 16px para que iOS no haga
   zoom automático al tocarlos */
@media (max-width: 768px) {
    .topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .topbar .usuario-info { width: 100%; justify-content: space-between; }

    .tarjeta h2 { font-size: 16px; }

    /* Formularios: texto a 16px evita el zoom automático de iOS */
    .form-group input,
    .form-grid .form-group input,
    .form-grid .form-group textarea,
    .buscador input[type="text"] {
        font-size: 16px;
    }

    /* Buscador: input arriba, botones abajo a todo el ancho */
    .buscador { flex-direction: column; align-items: stretch; }
    .buscador input[type="text"] { min-width: 0; }
    .buscador .btn { width: 100%; text-align: center; }

    /* Encabezado de sección + botón "Agregar": apilados y a todo el ancho */
    .top-acciones { flex-direction: column; align-items: stretch; }
    .top-acciones .btn { width: 100%; text-align: center; }

    /* Botones Guardar/Cancelar a todo el ancho, más fáciles de tocar */
    .acciones-form { flex-direction: column; }
    .acciones-form .btn { width: 100%; text-align: center; padding: 13px 20px; }

    /* Filtros de medida (INT/EXT/ALT): en celular se reparten el ancho
       disponible en 3 columnas iguales en vez de un ancho fijo de
       90px cada uno (que en pantallas angostas no entraban los 3
       juntos) */
    .filtro-medidas { width: 100%; }
    .filtro-medidas-campo { flex: 1; }
    .filtro-medidas input[type="text"] { width: 100%; font-size: 16px; }

    .stats-grid { grid-template-columns: 1fr; }
}

/* Celular chico: la tabla deja de comportarse como tabla y cada fila se
   vuelve una tarjeta vertical (patrón "responsive table"), con la
   etiqueta de cada columna a la izquierda y el dato a la derecha.
   Así se puede leer y tocar bien sin tener que hacer scroll horizontal
   ni "pellizcar" para hacer zoom.
   El corte se subió de 640px a 768px: muchos celulares en modo
   horizontal (o modelos grandes) miden más de 640px de ancho, y con
   ese corte se quedaban viendo la tabla ancha de escritorio, con el
   texto de TIPO/APLICACIÓN cortado sin poder leerlo completo. */
@media (max-width: 768px) {
    .scroll-hint { display: none; }
    .tabla-wrap { border: none; overflow-x: visible; cursor: auto; }

    table.tabla-datos { white-space: normal; }
    table.tabla-datos thead { display: none; }

    table.tabla-datos, table.tabla-datos tbody,
    table.tabla-datos tr, table.tabla-datos td {
        display: block;
        width: 100%;
    }

    table.tabla-datos tr {
        background: #fff;
        border: 1px solid var(--plomo-claro);
        border-radius: 8px;
        margin-bottom: 12px;
        padding: 6px 0;
    }
    table.tabla-datos tbody tr:nth-child(even) { background: #fff; }

    table.tabla-datos td {
        border-bottom: 1px dashed var(--plomo-claro);
        padding: 8px 12px 8px 46%;
        position: relative;
        min-height: 20px;
        text-align: right;
    }
    table.tabla-datos td:last-child { border-bottom: none; }

    /* TIPO, APLICACIÓN y OBS son los textos más largos del catálogo
       (a veces más de 60 caracteres). Apretarlos en el 54% derecho de
       la tarjeta, al lado de la etiqueta, los hacía difíciles de leer.
       Se apilan: la etiqueta arriba, el texto completo abajo, a todo
       el ancho de la tarjeta, con letra un poco más grande y más
       espacio entre líneas para que se lea cómodo. */
    table.tabla-datos td[data-label="Tipo"],
    table.tabla-datos td[data-label="Aplicación"],
    table.tabla-datos td[data-label="Obs"] {
        padding: 10px 12px;
        text-align: left;
        font-size: 14px;
        line-height: 1.45;
        color: var(--texto);
    }
    table.tabla-datos td[data-label="Tipo"]::before,
    table.tabla-datos td[data-label="Aplicación"]::before,
    table.tabla-datos td[data-label="Obs"]::before {
        position: static;
        display: block;
        width: auto;
        margin-bottom: 5px;
    }

    /* La etiqueta de columna (ej. "MARCA") sale del atributo data-label
       del <td> y se ubica a la izquierda, imitando el encabezado */
    table.tabla-datos td::before {
        content: attr(data-label);
        position: absolute;
        left: 12px;
        width: 40%;
        text-align: left;
        font-weight: 700;
        color: var(--plomo);
        font-size: 11.5px;
        text-transform: uppercase;
        letter-spacing: .3px;
    }

    /* La columna de acciones (Editar/Eliminar) se ve mejor centrada y
       en fila, no como par etiqueta/valor */
    td.acciones {
        display: flex;
        justify-content: center;
        gap: 8px;
        text-align: left;
        padding-left: 12px;
    }
    td.acciones::before { content: none; }
    td.acciones .btn { flex: 1; text-align: center; }

    .paginacion a, .paginacion span { padding: 10px 14px; }
}

@media (max-width: 420px) {
    .login-box { padding: 32px 22px; }
    .stat-num { font-size: 22px; }
}