/* ============================================================================
   PANTALLAS — Gestión Gama

   Lo que comparten las pantallas de listas (inventario, descuentos, ventas):
   la barra superior con el título y el contador, los botones, el panel, los
   filtros, la tabla con su fila desplegable, el estado vacío, la paginación y
   las pestañas. Cada pantalla carga además su propia hoja, con lo que es solo
   suyo.

   No declara colores literales: todo viene de las variables de temas.css.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   BARRA SUPERIOR

   Dos columnas: a la izquierda el título y las acciones principales, a la
   derecha, si la pantalla lo tiene, un bloque propio (en inventario, la
   fórmula de cálculo vigente). Se resuelve con flex y no con grid para que en
   pantallas angostas ese bloque caiga debajo por sí solo.
   --------------------------------------------------------------------------- */
.barra-superior {
    display: flex;
    align-items: stretch;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.barra-izquierda {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-width: 300px;
}

.pantalla-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.pantalla-titulo svg {
    width: 22px;
    height: 22px;
    color: var(--acento);
    flex-shrink: 0;
}

.pantalla-titulo h1 {
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--input-texto);
    margin: 0;
}

/* Contador de resultados junto al título */
.pantalla-titulo .contador {
    font-size: 0.7rem;
    letter-spacing: 1px;
    color: var(--texto-secundario);
    padding-left: 10px;
    border-left: 1px solid var(--linea);
    margin-left: 4px;
}

/* ---------------------------------------------------------------------------
   BOTONES

   Dos jerarquías: el primario (dorado, acción principal) y el secundario
   (contorno, acciones alternativas). El de icono se usa en las celdas de la
   tabla, donde el espacio es mínimo.
   --------------------------------------------------------------------------- */
.acciones-grupo {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 14px;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
}

.btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.btn-primario {
    background: var(--btn-bg);
    color: var(--btn-texto);
}

.btn-primario:hover {
    transform: translateY(-1px);
    box-shadow: var(--btn-sombra-hover);
}

.btn-secundario {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--texto-secundario);
}

.btn-secundario:hover {
    border-color: var(--acento);
    color: var(--acento);
}

/* Variante compacta, para los botones dentro de un panel (por ejemplo, el
   de la fórmula en inventario) */
.btn-chico {
    padding: 6px 11px;
    font-size: 0.6rem;
}

.btn-chico svg {
    width: 12px;
    height: 12px;
}

/* ---------------------------------------------------------------------------
   BOTÓN DE LISTA DE PRODUCTOS

   Va en su propia columna y no entre las acciones porque no modifica nada:
   solo muestra información. Lleva texto además del icono para que esa
   diferencia quede clara sin necesidad de pasar el mouse.
   --------------------------------------------------------------------------- */
.btn-lista-productos {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--texto-secundario);
    font-family: inherit;
    font-size: 0.6rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-lista-productos:hover {
    border-color: var(--acento);
    color: var(--acento);
}

.btn-lista-productos svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   PANEL

   Contenedor de sección. Reutiliza la tarjeta del login: mismo fondo, mismo
   borde, misma franja dorada superior.
   --------------------------------------------------------------------------- */
.panel {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-sombra);
    position: relative;
    margin-bottom: 1rem;
    box-sizing: border-box;
}

.panel::before {
    content: "";
    display: block;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--acento-oscuro) 20%,
        var(--acento) 50%,
        var(--acento-oscuro) 80%,
        transparent 100%
    );
}

.panel-cuerpo {
    padding: 14px 16px;
}

/* ---------------------------------------------------------------------------
   FILTROS

   Dos columnas: a la izquierda los controles de tipo y la búsqueda por texto;
   a la derecha una grilla 2×2 con los cuatro filtros por atributo.
   --------------------------------------------------------------------------- */
.filtros-layout {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.filtros-izquierda {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filtros-derecha {
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 10px 12px;
    flex: 0 1 auto;
    min-width: 280px;
}

/* ---- Grupo de opciones de tipo (radio) ----
   Son radio y no checkbox porque las opciones son mutuamente excluyentes (por
   ejemplo, en inventario: empaquetados, fraccionados o todos). Con checkboxes
   el usuario podría llegar a un estado contradictorio (todos tildados a la
   vez). */
.filtro-tipo {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.opcion-tipo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.opcion-tipo:hover {
    border-color: var(--input-border-hover);
}

/* El input real se oculta y se reemplaza por un indicador propio, porque los
   radio nativos no se pueden estilar de forma consistente entre navegadores.
   Se oculta con opacity y position, no con display:none, para que siga siendo
   enfocable con el teclado. */
.opcion-tipo input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.opcion-tipo .marca {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--input-border-hover);
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s ease;
}

.opcion-tipo .texto {
    font-size: 0.63rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--texto-secundario);
    transition: color 0.2s ease;
    white-space: nowrap;
}

/* Estado seleccionado: punto interior y borde de acento */
.opcion-tipo input:checked ~ .marca {
    border-color: var(--acento);
}

.opcion-tipo input:checked ~ .marca::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--acento);
}

.opcion-tipo input:checked ~ .texto {
    color: var(--acento);
}

.opcion-tipo:has(input:checked) {
    border-color: var(--acento);
}

/* Anillo de foco para navegación por teclado */
.opcion-tipo:has(input:focus-visible) {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}

/* ---- Campo de filtro genérico (select y búsqueda) ---- */
.campo-filtro {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.campo-filtro label {
    font-size: 0.52rem;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--texto-secundario);
}

.campo-filtro select,
.campo-filtro input {
    padding: 7px 10px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--input-texto);
    font-size: 0.72rem;
    font-family: inherit;
    transition: all 0.2s ease;
    box-sizing: border-box;
    width: 100%;
}

.campo-filtro select:hover,
.campo-filtro input:hover {
    border-color: var(--input-border-hover);
}

.campo-filtro select:focus,
.campo-filtro input:focus {
    outline: none;
    border-color: var(--acento);
}

.campo-filtro input::placeholder {
    color: var(--input-placeholder);
}

/* Los <option> se renderizan fuera del flujo normal del documento y no heredan
   los colores del <select>. Si no se los declara, el navegador usa fondo blanco
   por defecto mientras el texto puede quedar en blanco, volviéndolos ilegibles.

   El fondo va en color literal y no en variable porque las variables de input
   son degradados, y los <option> no soportan degradados: necesitan color plano. */
.campo-filtro select option {
    background-color: #0f1522;
    color: var(--input-texto);
}

[data-tema="claro"] .campo-filtro select option {
    background-color: #ffffff;
}

/* ---- Fila de búsqueda ---- */
.fila-busqueda {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.campo-buscar {
    flex: 1;
    min-width: 170px;
}

.buscar-envoltorio {
    position: relative;
    display: flex;
    align-items: center;
}

.buscar-envoltorio svg {
    position: absolute;
    left: 10px;
    width: 13px;
    height: 13px;
    color: var(--texto-secundario);
    pointer-events: none;
}

.buscar-envoltorio input {
    padding-left: 30px;
}

/* Botón para limpiar todos los filtros aplicados */
.btn-limpiar {
    background: transparent;
    border: 1px solid transparent;
    color: var(--texto-secundario);
    font-size: 0.58rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 7px 10px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-limpiar:hover {
    color: var(--acento);
    border-color: var(--acento);
}

/* ---------------------------------------------------------------------------
   TABLA

   Punto clave de legibilidad: a diferencia de la sidebar, acá el texto va en
   minúsculas y a mayor tamaño. Las mayúsculas con letter-spacing funcionan
   para etiquetas cortas de navegación, pero dificultan la lectura cuando hay
   que escanear decenas de filas de datos.
   --------------------------------------------------------------------------- */
.tabla-envoltorio {
    overflow-x: auto;
}

.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.tabla thead th {
    text-align: left;
    padding: 10px 12px;
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--texto-secundario);
    border-bottom: 1px solid var(--acento);
    white-space: nowrap;
    background: var(--input-bg);
}

/* Las columnas numéricas se alinean a la derecha: así las unidades y decimales
   quedan en la misma vertical y los valores se comparan de un vistazo. */
.tabla th.num,
.tabla td.num {
    text-align: right;
}

.tabla th.acciones,
.tabla td.acciones {
    text-align: center;
    width: 80px;
}

.tabla tbody td {
    padding: 9px 12px;
    color: var(--input-texto);
    border-bottom: 1px solid var(--linea);
    vertical-align: middle;
}

.tabla tbody tr {
    transition: background 0.15s ease;
}

.tabla tbody tr:hover {
    background: var(--input-bg);
}

/* Nombre (de un producto, de un descuento): se destaca por ser la columna de
   identificación */
.tabla .col-nombre {
    font-weight: 500;
}

/* Código: monoespaciado para que todos tengan el mismo ancho de carácter */
.tabla .col-codigo {
    font-family: "Consolas", "Courier New", monospace;
    font-size: 0.72rem;
    color: var(--texto-secundario);
}

/* Valor vacío o no aplicable */
.tabla .vacio {
    color: var(--texto-secundario);
    opacity: 0.5;
}

/* ---- Etiquetas (tipo de producto, estado) ---- */
.tag {
    display: inline-block;
    padding: 2px 7px;
    font-size: 0.55rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border: 1px solid;
    white-space: nowrap;
}

/* Mismas variables que .tipo-empaquetado / .tipo-fraccionado en modales.css,
   para que el color de cada tipo de producto se lea igual en toda la
   aplicación (por ejemplo, al buscar productos para un descuento). */
.tag-empaquetado {
    color: var(--tag-empaquetado);
    border-color: var(--tag-empaquetado);
    background: rgba(0, 0, 0, 0.15);
}

.tag-fraccionado {
    color: var(--tag-fraccionado);
    border-color: var(--tag-fraccionado);
    background: rgba(0, 0, 0, 0.15);
}

/* ---- Botones de acción por fila ----
   Editar y eliminar usan color propio (azul y rojo) en lugar del dorado del
   sistema. La razón: en una tabla con muchas filas, estas dos acciones tienen
   consecuencias muy distintas entre sí, y el color es la forma más rápida de
   distinguirlas de un vistazo. El rojo además funciona como advertencia previa
   al clic en una acción destructiva. */
.btn-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: transparent;
    border: 1px solid var(--input-border);
    color: var(--texto-secundario);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    margin: 0 2px;
}

.btn-icono svg {
    width: 13px;
    height: 13px;
}

/* Editar: azul */
.btn-icono.editar {
    border-color: var(--accion-editar-borde);
    color: var(--accion-editar);
}

.btn-icono.editar:hover {
    background: var(--accion-editar-fondo);
    border-color: var(--accion-editar);
}

/* Eliminar: rojo */
.btn-icono.eliminar {
    border-color: var(--accion-eliminar-borde);
    color: var(--accion-eliminar);
}

.btn-icono.eliminar:hover {
    background: var(--accion-eliminar-fondo);
    border-color: var(--accion-eliminar);
}

/* ---------------------------------------------------------------------------
   ESTADO VACÍO

   Se muestra cuando ningún elemento de la lista coincide con los filtros
   aplicados.
   --------------------------------------------------------------------------- */
.estado-vacio {
    text-align: center;
    padding: 40px 20px;
    color: var(--texto-secundario);
}

.estado-vacio svg {
    width: 34px;
    height: 34px;
    opacity: 0.35;
    margin-bottom: 12px;
}

.estado-vacio p {
    font-size: 0.75rem;
    margin: 0 0 4px;
}

.estado-vacio .sugerencia {
    font-size: 0.65rem;
    opacity: 0.7;
}

/* ---------------------------------------------------------------------------
   PIE DE TABLA / PAGINACIÓN
   --------------------------------------------------------------------------- */
.tabla-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--linea);
    flex-wrap: wrap;
}

.tabla-pie .info {
    font-size: 0.63rem;
    letter-spacing: 0.8px;
    color: var(--texto-secundario);
}

.paginacion {
    display: flex;
    gap: 4px;
}

.paginacion .pagina {
    min-width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--input-border);
    color: var(--texto-secundario);
    font-size: 0.65rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0 6px;
}

.paginacion .pagina:hover {
    border-color: var(--acento);
    color: var(--acento);
}

.paginacion .pagina.activa {
    border-color: var(--acento);
    color: var(--btn-texto);
    background: var(--btn-bg);
}

.paginacion .pagina:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.paginacion .pagina:disabled:hover {
    border-color: var(--input-border);
    color: var(--texto-secundario);
}

/* ---------------------------------------------------------------------------
   FILA EXPANDIBLE

   Cada elemento de la lista ocupa dos <tr>: la fila visible con los datos
   principales y una fila oculta con el detalle. Se usan dos filas hermanas en
   lugar de anidar contenido dentro de una celda porque el detalle necesita
   ocupar todo el ancho de la tabla, algo que no se puede lograr desde dentro
   de una sola columna.

   El estado se controla con la clase "abierta" sobre ambas filas.
   --------------------------------------------------------------------------- */

/* Flecha indicadora a la izquierda del nombre */
.flecha-expandir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 7px;
    color: var(--texto-secundario);
    transition: transform 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
    vertical-align: middle;
}

.flecha-expandir svg {
    width: 11px;
    height: 11px;
}

/* Fila de detalle: oculta por defecto */
.fila-detalle {
    display: none;
}

.fila-detalle.abierta {
    display: table-row;
}

.fila-detalle.abierta > td {
    background: var(--input-bg);
    box-shadow: inset 3px 0 0 var(--acento);
    padding: 0;
    border-bottom: 1px solid var(--acento);
}

/* ---------------------------------------------------------------------------
   CONTENIDO DEL DETALLE
   --------------------------------------------------------------------------- */
.detalle-cuerpo {
    display: flex;
    align-items: flex-end;
    gap: 22px;
    flex-wrap: wrap;
    padding: 14px 18px 16px 22px;
}

/* Cada dato del detalle: etiqueta arriba, valor abajo */
.detalle-campo {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.detalle-campo .etiqueta {
    font-size: 0.52rem;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--texto-secundario);
}

/* El valor NO es un campo de texto: es un <span> de solo lectura. Los datos
   solo pueden modificarse desde la pantalla de edición que corresponda, que
   valida los cambios y los registra en el log de auditoría.
   Mostrarlos en un <input> sugeriría que se pueden editar acá mismo.

   El estilo evita deliberadamente el aspecto de campo: sin borde envolvente ni
   fondo de input, solo una barra de acento a la izquierda. */
.detalle-campo .valor {
    font-size: 0.8rem;
    color: var(--input-texto);
    padding: 3px 0 3px 10px;
    border-left: 2px solid var(--acento);
    white-space: nowrap;
}

/* Valores numéricos: monoespaciados para alinear las cifras */
.detalle-campo .valor.numero {
    font-family: "Consolas", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .filtros-derecha {
        flex: 1 1 100%;
    }
}

@media (max-width: 600px) {
    .filtro-tipo {
        width: 100%;
    }

    .opcion-tipo {
        flex: 1;
        justify-content: center;
    }

    .filtros-derecha {
        grid-template-columns: 1fr;
    }

    .campo-buscar {
        min-width: 100%;
    }

    .detalle-cuerpo {
        gap: 14px;
        padding: 12px 14px 14px 18px;
    }
}

/* ---------------------------------------------------------------------------
   ACCESIBILIDAD
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .btn,
    .btn-icono,
    .opcion-tipo,
    .tabla tbody tr {
        transition: none;
    }

    .btn-primario:hover {
        transform: none;
    }
}

/* ---------------------------------------------------------------------------
   PESTAÑAS

   Cada pestaña es un estado distinto de la pantalla, con su propia URL. Son
   enlaces reales y no botones para que el usuario pueda guardarlas o
   compartirlas, y para que el botón de atrás del navegador funcione.
   --------------------------------------------------------------------------- */
.pestanas {
    display: flex;
    border-bottom: 1px solid var(--card-border);
    margin-bottom: 1rem;
}

.pestana {
    flex: 1;
    text-align: center;
    padding: 12px 10px;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--texto-secundario);
    text-decoration: none;
    /* El borde transparente reserva el espacio de la línea de acento: sin él,
       el texto se desplazaría dos píxeles al activarse la pestaña. */
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}

.pestana:hover {
    color: var(--input-texto);
}

.pestana.activa {
    color: var(--acento);
    border-bottom-color: var(--acento);
    background: var(--card-bg);
}

/* Con tres pestañas los títulos se aprietan: se reduce el espaciado entre
   letras antes que el tamaño de fuente, que afectaría más la legibilidad. */
.pestanas .pestana {
    letter-spacing: 0.9px;
    padding-left: 6px;
    padding-right: 6px;
}