/* --------------------------------------------
estilos generales
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --azul-cobalto: #2563eb;
    --azul-oscuro: #1e40af;
    --gris-oscuro: #334155;
    --negro: #1e293b;
    --blanco: #ffffff;
    --gris-claro: #f5f7fa;
    --gris-medio: #64748b;
    --verde: #10b981;
    --amarillo: #f59e0b;
    --rojo: #dc2626;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--gris-claro);
    color: var(--negro);
}

/* --------------------------------------------------------------------------
HEADER PRINCIPAL
*/

.header-principal {
    background: var(--blanco);
    border-bottom: 2px solid #e2e8f0;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-logo-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-logo-img {
    height: 45px;
}

.header-titulo {
    font-size: 24px;
    font-weight: 700;
    color: var(--negro);
}

.header-nav {
    display: flex;
    gap: 30px;
}

.header-nav a {
    text-decoration: none;
    color: var(--gris-oscuro);
    font-weight: 600;
    font-size: 15px;
    transition: color 0.3s;
}

.header-nav a:hover {
    color: var(--azul-cobalto);
}

.header-nav a.active {
    color: var(--azul-cobalto);
    border-bottom: 3px solid var(--azul-cobalto);
    padding-bottom: 3px;
}

.header-usuario {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--gris-claro);
    padding: 10px 16px;
    border-radius: 8px;
}

.header-usuario-texto {
    font-size: 14px;
    font-weight: 600;
    color: var(--gris-oscuro);
}

/* ----------------------------------------------------------
contenedor principal
*/

.contenedor-principal {
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 40px;
}

.tarjeta {
    background: var(--blanco);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

.titulo-seccion {
    font-size: 22px;
    font-weight: 700;
    color: var(--negro);
    margin-bottom: 20px;
}

.subtitulo-seccion {
    font-size: 14px;
    color: var(--gris-medio);
    margin-top: -15px;
    margin-bottom: 20px;
}

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

.btn-principal {
    background: var(--azul-cobalto);
    color: var(--blanco);
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-principal:hover {
    background: var(--azul-oscuro);
}

.btn-secundario {
    background: var(--blanco);
    color: var(--azul-cobalto);
    padding: 12px 24px;
    border: 2px solid var(--azul-cobalto);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-secundario:hover {
    background: #eff6ff;
}

.btn-icono {
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--gris-oscuro);
    font-size: 18px;
    border-radius: 6px;
    transition: background 0.2s;
}

.btn-icono:hover {
    background: var(--gris-claro);
}

/* ------------------------------------------------------
formularios
*/

.form-grupo {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--gris-oscuro);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-input {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    color: var(--negro);
    transition: border 0.3s;
}

.form-input:focus {
    outline: none;
    border-color: var(--azul-cobalto);
}

.form-select {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    color: var(--negro);
    background: var(--blanco);
    cursor: pointer;
}

.form-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    color: var(--negro);
    resize: vertical;
    min-height: 100px;
}

/*------------------------------------------------------------
   TABLAS
*/

.tabla-contenedor {
    overflow-x: auto;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead {
    background: var(--gris-claro);
}

th {
    padding: 16px;
    text-align: left;
    color: var(--gris-oscuro);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
}

td {
    padding: 16px;
    font-size: 14px;
    border-bottom: 1px solid #f1f5f9;
}

tr:hover {
    background: #f8fafc;
}

/*------------------------------------------------------------------------------
cuadritos indicadores de estado de filas
*/

.badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-proceso {
    background: #dbeafe;
    color: #1e40af;
}

.badge-pendiente {
    background: #fef3c7;
    color: #92400e;
}

.badge-terminado {
    background: #d1fae5;
    color: #065f46;
}

.badge-pausado {
    background: #fee2e2;
    color: #991b1b;
}

.badge-excelente {
    background: #d1fae5;
    color: #065f46;
}

.badge-bueno {
    background: #dbeafe;
    color: #1e40af;
}

.badge-regular {
    background: #fef3c7;
    color: #92400e;
}

.badge-bajo {
    background: #fee2e2;
    color: #991b1b;
}

/*----------------------------------------------------------------
   TABS (PESTAÑAS)
*/

.tabs-contenedor {
    display: flex;
    gap: 8px;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 24px;
}

.tab {
    padding: 14px 28px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--gris-medio);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.tab:hover {
    color: var(--azul-cobalto);
}

.tab.active {
    color: var(--azul-cobalto);
    border-bottom-color: var(--azul-cobalto);
}

/* -------------------------------------------------------------
modales superpuestos
*/

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-overlay.show {
    display: flex;
}

.modal-contenido {
    background: var(--blanco);
    border-radius: 16px;
    max-width: 700px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-header {
    background: var(--azul-cobalto);
    color: var(--blanco);
    padding: 24px 28px;
    border-radius: 16px 16px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    font-size: 20px;
    font-weight: 700;
}

.modal-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: var(--blanco);
    font-size: 28px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-body {
    padding: 28px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 24px;
    border-top: 2px solid #e2e8f0;
}

/* -------------------------------------------------------------------------------------
   CARDS
*/

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.card {
    background: var(--blanco);
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s;
}

.card:hover {
    border-color: var(--azul-cobalto);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.card.seleccionada {
    border-color: var(--azul-cobalto);
    background: #eff6ff;
}

/* ------------------------------------------------------------------
pagina de inicio de sesion
  */

.login-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-box {
    background: var(--blanco);
    border-radius: 16px;
    padding: 48px 40px;
    max-width: 450px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.login-logo {
    width: 200px;
    margin: 0 auto 30px;
    display: block;
}

.login-titulo {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--negro);
    margin-bottom: 8px;
}

.login-subtitulo {
    text-align: center;
    font-size: 14px;
    color: var(--gris-medio);
    margin-bottom: 30px;
}

.role-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 30px;
}

.role-option {
    position: relative;
}

.role-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.role-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.role-label:hover {
    border-color: var(--azul-cobalto);
    background: #f8fafc;
}

.role-option input[type="radio"]:checked + .role-label {
    border-color: var(--azul-cobalto);
    background: #eff6ff;
}

.role-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

/*----------------------------------------------------
   DASHBOARD
*/

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 30px;
}

.dashboard-card {
    background: var(--gris-claro);
    padding: 30px;
    border-radius: 12px;
}

.dashboard-card h2 {
    font-size: 18px;
    margin-bottom: 20px;
    color: var(--gris-oscuro);
}

.info-panel {
    background: var(--gris-oscuro);
    color: var(--blanco);
    padding: 30px;
    border-radius: 12px;
}

.info-panel p {
    margin-bottom: 10px;
    font-size: 14px;
}

.info-panel strong {
    color: var(--azul-cobalto);
}

/* ------------------------------------------------------
   CARDS DE EFICIENCIA
*/

.efficiency-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 30px;
}

.efficiency-card {
    background: var(--blanco);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.efficiency-label {
    font-size: 12px;
    color: var(--gris-medio);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.efficiency-value {
    font-size: 42px;
    font-weight: 800;
}

.efficiency-value.individual {
    color: var(--azul-cobalto);
}

.efficiency-value.modular {
    color: var(--verde);
}

/* ---------------------------------------------------------------------
   BOTÓN GRANDE AZUL DE PULSACIÓN 
*/

.pulsation-container {
    text-align: center;
    padding: 50px 0;
}

.pulsation-button {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: var(--azul-cobalto);
    color: var(--blanco);
    border: none;
    font-size: 24px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 40px rgba(37, 99, 235, 0.5);
    margin: 30px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.pulsation-button:active {
    transform: scale(0.95);
}

.counter-display {
    background: var(--blanco);
    border-radius: 16px;
    padding: 20px 40px;
    display: inline-block;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.counter-label {
    font-size: 12px;
    color: var(--gris-medio);
    font-weight: 600;
    text-transform: uppercase;
}

.counter-value {
    font-size: 48px;
    font-weight: 800;
    color: var(--azul-cobalto);
}

/* ---------------------------------------------------------
   Cuadrito indicador de progreso
*/

.progress-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
}

.step {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e2e8f0;
    color: var(--gris-medio);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.step.active {
    background: var(--azul-cobalto);
    color: var(--blanco);
}

.step.completed {
    background: var(--verde);
    color: var(--blanco);
}

.step-line {
    width: 60px;
    height: 3px;
    background: #e2e8f0;
}

.step-line.active {
    background: var(--azul-cobalto);
}

/* ------______________________________________________________
   RESPONSIVE DESIGN
 */

@media (max-width: 768px) {
    .header-principal {
        flex-direction: column;
        gap: 20px;
    }

    .header-nav {
        flex-direction: column;
        gap: 10px;
    }

    .contenedor-principal {
        padding: 0 20px;
    }

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

    .efficiency-cards {
        grid-template-columns: 1fr;
    }

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

    .pulsation-button {
        width: 200px;
        height: 200px;
    }
}

/* ----------------------------------------------------------
   BUSCADOR
*/

.search-box {
    position: relative;
    max-width: 400px;
    margin-bottom: 20px;
}

.search-box input {
    width: 100%;
    padding: 12px 16px 12px 45px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
}

.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gris-medio);
}

/* ---------------------------------------------------------------------------------------
   BARRA DE ACCIONES
*/

.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 15px;
}

/* -----------------------------------------------------------------------
  grid formulario
*/

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-grid-full {
    grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------
   INFO BOX
 */

.info-box {
    background: #eff6ff;
    border-left: 4px solid var(--azul-cobalto);
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.info-box p {
    font-size: 13px;
    color: var(--gris-oscuro);
    line-height: 1.6;
}

/* ----------------------------------------------------------
   NOTIFICACIONES (OVERLAYS)
*/

.notification-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.notification-overlay.show {
    display: flex;
}

.notification {
    background: var(--blanco);
    border-radius: 16px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.notification-header {
    padding: 20px;
    border-radius: 16px 16px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--blanco);
}

.notification-header.warning {
    background: var(--amarillo);
}

.notification-header.error {
    background: var(--rojo);
}

.notification-body {
    padding: 20px;
}

.notification-body p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 10px;
}
/* ----------------------------------------------------------
A partir de aqui en adelante hago una actualizacion al css
*/
/* 
   BADGE MÓDULO (header operario)
 */
.badge-modulo {
    background: #2563eb;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

/* --------------------------------------------------------------------------------------
   INDICADOR DE PASOS (selección lote / operación)
 */
.pasos-indicador {
    display: flex;
    align-items: center;
    margin-top: 24px;
    flex-wrap: wrap;
    gap: 8px;
}

.paso {
    display: flex;
    align-items: center;
    gap: 8px;
}

.paso-numero {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.paso-texto {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.paso-activo .paso-numero {
    background: #2563eb;
    color: #fff;
}

.paso-activo .paso-texto {
    color: #2563eb;
    font-weight: 700;
}

.paso-inactivo .paso-numero {
    background: #e2e8f0;
    color: #94a3b8;
}

.paso-inactivo .paso-texto {
    color: #94a3b8;
}

.paso-completado .paso-numero {
    background: #16a34a;
    color: #fff;
}

.paso-completado .paso-texto {
    color: #16a34a;
    font-weight: 600;
}

.paso-linea {
    flex: 1;
    height: 2px;
    background: #e2e8f0;
    min-width: 30px;
}

.paso-linea-completada {
    background: #16a34a;
}

/* -------------------------------------------------------------------------------
   ALERTA INFO (aviso azul informativo)
 */
.alerta-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13px;
    color: #1e40af;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

/* ---------------------------------------------------------------------------------------
   TARJETAS DE LOTE (selección de lote operario)
  */
.lote-card {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: #fff;
}

.lote-card:hover {
    border-color: #2563eb;
    background: #f8fafc;
}

.lote-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.lote-om {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
}

/* Prenda + color: el dato que el operario reconoce de un vistazo ("Falda Negra").
   Va deliberadamente más grande y oscuro que el resto de datos de la tarjeta. */
.lote-prenda {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: #1e293b;
    margin-bottom: 14px;
}

.lote-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.lote-dato {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lote-dato-label {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lote-dato-valor {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.lote-card-footer {
    margin-top: 4px;
}

/* ----------------------------------------------------------------------------
   TARJETAS DE OPERACIÓN (selección de operación)
 */
.operacion-card {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: #fff;
}

.operacion-card:hover {
    border-color: #2563eb;
    background: #f8fafc;
}

.operacion-card-activa {
    border-color: #2563eb;
    background: #eff6ff;
}

.operacion-numero {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.operacion-info {
    flex: 1;
    min-width: 0;
}

.operacion-nombre {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 2px;
}

.operacion-detalle {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.operacion-maquina {
    font-size: 11px;
    color: #94a3b8;
    display: flex;
    align-items: center;
}

.operacion-sam {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.sam-valor {
    font-size: 16px;
    font-weight: 800;
    color: #2563eb;
}

.sam-label {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.operacion-accion {
    flex-shrink: 0;
}

.btn-sm {
    padding: 8px 12px;
    font-size: 13px;
}

/*---------------------------------------------------------------------------------
   PANEL DE PULSACIÓN
 */
.pulsacion-info-panel {
    background: #1e3a5f;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 4px;
}

.pulsacion-info-fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.pulsacion-info-fila:last-child {
    border-bottom: none;
}

.pulsacion-info-label {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pulsacion-info-valor {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

/* Aviso de prórroga: sustituye a "ÚLTIMA" cuando ya terminó el turno pero aún se puede
   registrar. En ámbar para que se note sin alarmar: no es un error, es un plazo. */
.aviso-prorroga {
    margin-top: 12px;
    padding: 10px 14px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #92400e;
    text-align: center;
    line-height: 1.4;
}

/* ── AVISO DE SESIÓN EXPIRADA ───────────────────────────────────────────────
   Cubre toda la pantalla y bloquea la interacción a propósito: un aviso ignorable no sirve
   para alguien concentrado trabajando, que es justo cuando pasa. */
.sesion-expirada-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(15, 23, 42, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.sesion-expirada-caja {
    background: #fff;
    border-radius: 16px;
    padding: 32px 28px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.sesion-expirada-icono {
    font-size: 40px;
    color: #f59e0b;
    margin-bottom: 14px;
}

.sesion-expirada-titulo {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
}

.sesion-expirada-texto {
    font-size: 15px;
    line-height: 1.5;
    color: #475569;
    margin-bottom: 22px;
}

.sesion-expirada-btn {
    width: 100%;
    padding: 14px;
    font-size: 16px;
}

/* Switch "Individual" del avance del lote: alterna entre el aporte de todo el módulo y el
   propio. Área de toque generosa porque se usa con el dedo en planta. */
.avance-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    user-select: none;
}

.avance-switch input {
    width: 20px;
    height: 20px;
    flex: none;
}

/* Subtítulo dentro del encabezado del modal: indica QUÉ se está viendo, con menos peso
   visual que el título para que no compita con él. */
.modal-subtitulo {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
}

/* ── "Mis pulsaciones de hoy" (modal del operario) ──────────────────────────
   Formato apilado, no tabla: se lee en celular sin scroll horizontal. */
.mis-ops-item {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}

.mis-ops-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
}

.mis-ops-texto { min-width: 0; }

.mis-ops-meta {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.3px;
    margin-bottom: 3px;
}

.mis-ops-nombre {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
}

.mis-ops-bloques {
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 6px 14px;
}

.mis-ops-bloque-fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: 13px;
    color: #475569;
    border-bottom: 1px solid #e8edf3;
}

.mis-ops-bloque-fila:last-child { border-bottom: none; }

.mis-ops-total {
    margin-top: 14px;
    padding: 12px 14px;
    background: #f1f5f9;
    border-radius: 10px;
    text-align: center;
    font-size: 15px;
    color: #1e293b;
}

/* "Falda Negra - 6415" en UNA sola línea, para no sumarle altura al panel (en celular
   empujaba hacia abajo todo lo demás). Ambas partes usan .pulsacion-info-valor, así que
   comparten tamaño y color. El wrap es solo red de seguridad para textos muy largos. */
.pulsacion-info-valor-grupo {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

/* -----------------------------------------
   TARJETA DE EFICIENCIA
*/
.eficiencia-card {
    background: #1e3a5f;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}

.eficiencia-label {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.eficiencia-valor {
    font-size: 32px;
    font-weight: 800;
    color: #4ade80;
    line-height: 1;
    margin-bottom: 6px;
}

.eficiencia-estado {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.eficiencia-card-clic {
    cursor: pointer;
}

.eficiencia-card-clic:active {
    background: #16324f;
}

.eficiencia-card-hint {
    margin-top: 8px;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.eficiencia-card-hint i {
    margin-right: 4px;
}

/* -----------------------------------------
   RESUMEN POR HORARIO (bloques de una hora productiva, desplegables)
*/
.bloques-horario-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bloque-horario {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.bloque-horario-actual {
    border-color: var(--azul-cobalto);
}

.bloque-horario-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f8fafc;
    border: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.bloque-horario-header:disabled {
    cursor: default;
}

.bloque-horario-rango {
    font-size: 14px;
    font-weight: 700;
    color: #334155;
}

.bloque-horario-resumen {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bloque-horario-pct {
    font-size: 15px;
    font-weight: 800;
}

.bloque-horario-badge-actual {
    font-size: 10px;
    font-weight: 800;
    color: var(--azul-cobalto);
    background: #dbeafe;
    border-radius: 999px;
    padding: 3px 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.bloque-horario-chevron {
    color: #94a3b8;
    transition: transform 0.2s ease;
}

/* Child selectors (>) para que un bloque solo controle SU propio detalle/chevron y no los de
   bloques anidados (el informe anida día → módulo → horario). */
.bloque-horario.expandido > .bloque-horario-header .bloque-horario-chevron {
    transform: rotate(180deg);
}

.bloque-horario > .bloque-horario-detalle {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

/* Alto suficiente para no recortar NUNCA un horario completo (12 períodos de 5 min ≈ 692px
   en escritorio; se deja margen amplio por si en móvil las celdas envuelven a 2 líneas).
   Antes estaba en 600px y cortaba las últimas ~2 filas de cada hora — se veían como
   "períodos que no se guardaron" cuando en realidad el CSS los tapaba. */
.bloque-horario.expandido > .bloque-horario-detalle {
    max-height: 1400px;
}

.bloque-horario-detalle .tabla-contenedor {
    padding: 0 16px 14px;
}

/* Niveles día/módulo del informe: contienen acordeones anidados de altura variable, así que
   se muestran/ocultan con display en vez de max-height (que recortaría el contenido anidado). */
.bloque-horario.nivel-dia > .bloque-horario-detalle {
    max-height: none;
    overflow: visible;
    transition: none;
    display: none;
}

.bloque-horario.nivel-dia.expandido > .bloque-horario-detalle {
    display: block;
}

/* --------------------------------------------------------------
   PANEL DERECHO PULSACIÓN
 */
.pulsacion-panel-derecho {
    background: #1e40af;
    border-radius: 12px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    min-height: 420px;
    justify-content: center;
}

.unidades-completadas-caja {
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
    padding: 16px 32px;
    text-align: center;
    width: 100%;
}

.unidades-label {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.unidades-numero {
    font-size: 52px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

/* ----------------------------------------------------------------------------
   BOTÓN PRINCIPAL DE PULSACIÓN
*/
.btn-pulsacion {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: #2563eb;
    border: 6px solid rgba(255,255,255,0.3);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.btn-pulsacion i {
    font-size: 42px;
}

.btn-pulsacion:hover {
    background: #1d4ed8;
    border-color: rgba(255,255,255,0.5);
}

.btn-pulsacion:active {
    background: #1e3a8a;
}

.tiempo-ultima-pulsacion {
    background: rgba(255,255,255,0.15);
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 13px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ---------------------------------------
   badges DE NOTIFICACIÓN
 */
.badge-notificacion {
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.badge-personal {
    background: #fee2e2;
    color: #991b1b;
}

.badge-general {
    background: #fef3c7;
    color: #92400e;
}

/* ---------------------------------------------------------------
   CAJAS DE ALERTA EN MODALES
*/
.alerta-eficiencia-caja {
    background: #fee2e2;
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.alerta-porcentaje {
    background: #ef4444;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    padding: 10px 14px;
    border-radius: 8px;
    flex-shrink: 0;
}

.cuello-operacion-caja {
    background: #fef3c7;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.cuello-info-caja {
    background: #f8fafc;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* 
   RESPONSIVE
*/
/* ─────────────────────────────────────────────────────────────────────
   GRID DE LA PANTALLA DE PULSACIÓN
   Mobile-first: 1 columna (pulsación arriba, info abajo).
   Desktop (≥ 769px): 2 columnas (info izq, pulsación der).
   ───────────────────────────────────────────────────────────────────── */
.pulsacion-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 769px) {
    .pulsacion-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: start;
    }
    /* En desktop: panel de info a la izquierda, pulsación a la derecha */
    .pulsacion-panel-izq   { order: 1; }
    .pulsacion-panel-derecho { order: 2; }
}

@media (max-width: 768px) {

    .pasos-indicador {
        flex-direction: column;
        align-items: flex-start;
    }

    .paso-linea {
        width: 2px;
        height: 20px;
        min-width: unset;
    }

    .operacion-card {
        flex-wrap: wrap;
    }

    .btn-pulsacion {
        width: 160px;
        height: 160px;
    }

    .btn-pulsacion i {
        font-size: 36px;
    }

    .unidades-numero {
        font-size: 44px;
    }

    /* Header operario más compacto en móvil */
    .header-operario {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 10px 16px;
        gap: 8px;
    }

    .header-operario .header-nav {
        flex-direction: row;
        gap: 16px;
        width: 100%;
    }

    .header-operario .header-logo-img {
        height: 32px;
    }

    .header-operario .header-titulo {
        font-size: 17px;
    }
}

@media (max-width: 600px) {

    .lote-card-body {
        grid-template-columns: 1fr;
    }

    .operacion-sam {
        display: none;
    }
}

/* ================================================================
   MÓDULO 6 — INFORMES
================================================================ */

/* badge-estado: contenedor base para los badges de color */
.badge-estado {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* badge-en-proceso: alias de badge-proceso (azul) */
.badge-en-proceso {
    background: #dbeafe;
    color: #1e40af;
}

/* Tarjeta de resumen numérico para informes */
.informe-card-resumen {
    background: var(--gris-claro);
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

.informe-card-valor {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 6px;
}

.informe-card-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gris-medio);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Card de resumen que abre un detalle. Solo se aplica cuando el informe es de un solo día:
   el desglose por operación no tiene sentido sobre un rango. */
.informe-card-clic {
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.informe-card-clic:hover {
    border-color: #2563eb;
    background: #f1f5f9;
}

.informe-card-hint {
    margin-top: 8px;
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.informe-card-hint i {
    margin-right: 4px;
}

/* Grid de tarjetas de resumen del rango (se adapta al nº de tarjetas) */
.informe-resumen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* Subtítulos de sección dentro de un informe */
.informe-subtitulo {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 12px;
}

.informe-subtitulo-hint {
    font-size: 12px;
    font-weight: 400;
    color: #94a3b8;
}

/* Atajos de rango de fecha */
.rango-atajos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.rango-atajos-label {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.rango-atajo-btn {
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gris-medio);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.rango-atajo-btn:hover {
    background: #eff6ff;
    color: var(--azul-cobalto);
    border-color: var(--azul-cobalto);
}

/* Roster de operarios en el detalle de un día (informe por módulo) */
.roster-operarios {
    margin-bottom: 14px;
}

.roster-label {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 8px;
}

.roster-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.roster-chip {
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    color: #334155;
}

.bloque-horario-sublabel {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 8px;
}

/* ================================================================
   MÓDULO 7 — MONITOREO EN TIEMPO REAL
================================================================ */

.monitoreo-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.monitoreo-indicador-vivo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gris-medio);
}

.monitoreo-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--verde);
    flex-shrink: 0;
    animation: monitoreo-pulso 2s ease-in-out infinite;
}

@keyframes monitoreo-pulso {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

/* Renglón de eficiencia general de la planta (arriba del grid) */
.planta-resumen-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    background: #1e3a5f;
    border-radius: 12px;
    padding: 16px 24px;
    margin-bottom: 24px;
}

.planta-resumen-principal {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}

.planta-resumen-label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.planta-resumen-valor {
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    color: #4ade80;
}

.planta-resumen-stats {
    display: flex;
    gap: 28px;
}

.planta-resumen-stat {
    text-align: center;
}

.planta-resumen-stat-valor {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.planta-resumen-stat-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 4px;
}

.planta-resumen-stat-alerta .planta-resumen-stat-valor {
    color: #fca5a5;
}

.monitoreo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* Fila de botones del card de módulo (Ver operarios / Ver por horario) */
.monitoreo-botones {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.monitoreo-botones .monitoreo-toggle-btn {
    margin-top: 0;
}

.monitoreo-card {
    background: var(--blanco);
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    transition: border-color 0.2s;
}

.monitoreo-card-sinactividad {
    opacity: 0.65;
}

.monitoreo-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.monitoreo-modulo-id {
    font-size: 20px;
    font-weight: 800;
    color: var(--negro);
}

.monitoreo-eficiencia-bloque {
    text-align: center;
    padding: 10px 0;
}

.monitoreo-eficiencia-numero {
    font-size: 42px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 4px;
}

.monitoreo-eficiencia-buena  { color: #10b981; }
.monitoreo-eficiencia-regular { color: #f59e0b; }
.monitoreo-eficiencia-baja   { color: #dc2626; }
.monitoreo-eficiencia-sindata { color: #94a3b8; }

.monitoreo-stats {
    display: flex;
    justify-content: space-around;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.monitoreo-stat {
    text-align: center;
}

.monitoreo-stat-valor {
    font-size: 22px;
    font-weight: 800;
    color: var(--negro);
    line-height: 1;
}

.monitoreo-stat-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--gris-medio);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 3px;
}

.monitoreo-stat-alerta .monitoreo-stat-valor {
    color: #dc2626;
}

.monitoreo-toggle-btn {
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gris-medio);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    margin-top: 12px;
    width: 100%;
}

.monitoreo-toggle-btn:hover {
    background: #f8fafc;
    color: var(--azul-cobalto);
    border-color: var(--azul-cobalto);
}

.monitoreo-detalle {
    display: none;
    margin-top: 14px;
    border-top: 2px solid #e2e8f0;
    padding-top: 14px;
}

.monitoreo-detalle.abierto {
    display: block;
}

@media (max-width: 768px) {
    .monitoreo-grid {
        grid-template-columns: 1fr;
    }
    .monitoreo-eficiencia-numero {
        font-size: 34px;
    }
}
/* -----------------------------------------
   PRODUCTIVIDAD — el segundo indicador
   Va siempre pegado a la eficiencia, pero nunca compite con ella: pequeño, gris y
   SIN semáforo de color. La eficiencia es la métrica que motiva porque depende del
   operario; la productividad solo acompaña, mostrando lo que costó el tiempo perdido
   y el que no vino. Se reusa en informes, monitoreo y las pantallas de operario.
*/
.prod-sec {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

/* Misma cosa sobre los fondos azul oscuro (cards del operario, renglón de planta),
   donde el gris claro no se leería. */
.prod-sec-oscuro {
    color: rgba(255,255,255,0.55);
}

/* Debajo de un número grande, en vez de al lado. */
.prod-sec-bajo {
    display: block;
    margin-top: -2px;
    margin-bottom: 8px;
}

/* Marca de período con los minutos descontados por el admin: no cuenta para la
   eficiencia pero sí para la productividad. */
.badge-descontado {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    background: #e2e8f0;
    border-radius: 999px;
    padding: 2px 8px;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* -----------------------------------------
   MINUTOS DESCONTADOS — franja de control y switches
   Va DENTRO del panel desplegado, no en la cabecera del acordeón: hay que abrir el
   bloque para poder tocarlo, lo que de por sí evita el clic accidental. Apagar
   siempre pasa además por el modal de confirmación.
*/
.franja-minutos {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 14px;
    margin-bottom: 12px;
}

.franja-min-etiqueta {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.franja-min-info {
    font-size: 12px;
    color: #64748b;
}

.franja-min-acciones {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* El switch de Bootstrap sin el hueco de la etiqueta, que aquí va aparte. */
.switch-minutos {
    padding-left: 0;
    margin-bottom: 0;
    min-height: 0;
    display: inline-flex;
    align-items: center;
}

.switch-minutos .form-check-input {
    margin: 0;
    cursor: pointer;
}

/* Estado "a medias": el horario tiene unos períodos descontados y otros no. */
.switch-minutos .form-check-input[data-medias="1"] {
    background-color: #fbbf24;
    border-color: #f59e0b;
}

.celda-ctrl {
    text-align: center;
    white-space: nowrap;
}

.celda-ctrl .switch-minutos {
    vertical-align: middle;
}

.btn-nota {
    color: #94a3b8;
}

.btn-nota-llena {
    color: var(--azul-cobalto);
}

.desc-linea {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
    color: #475569;
}

.desc-linea:last-child {
    border-bottom: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   OPERACIONES DENTRO DE SU REFERENCIA (admin-produccion)
   Las operaciones siguen siendo una entidad aparte en la base de datos, pero para el
   administrador son "los pasos de esta prenda". Estos estilos son los del modal que las
   muestra desde dentro de la referencia.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Botón de la fila de referencia. Lleva el conteo dentro para que diga cuántas hay y
   lleve a verlas con el mismo clic. */
.btn-ops {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--blanco);
    color: var(--azul-cobalto);
    border: 2px solid #dbeafe;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.btn-ops:hover {
    background: #eff6ff;
    border-color: var(--azul-cobalto);
}

.btn-ops-num {
    background: var(--azul-cobalto);
    color: var(--blanco);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 12px;
    line-height: 1.6;
}

.opsref-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 2px solid #e2e8f0;
}

.opsref-resumen {
    font-size: 13px;
    color: var(--gris-medio);
}

/* El formulario en línea se distingue del listado con un fondo gris, para que quede claro
   que es una zona de edición y no otro renglón más de la lista. */
.opsref-form {
    background: var(--gris-claro);
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.opsref-form-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.opsref-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
}

.opsref-item:last-child { border-bottom: none; }

.opsref-item-datos { min-width: 0; }   /* deja que el texto largo se corte en vez de desbordar */

.opsref-item-nombre {
    font-weight: 600;
    color: var(--negro);
    font-size: 15px;
}

.opsref-item-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
    font-size: 12px;
    color: var(--gris-medio);
}

.opsref-chip {
    background: #e0e7ff;
    color: var(--azul-oscuro);
    border-radius: 6px;
    padding: 2px 8px;
    font-weight: 600;
}

.opsref-item-detalle {
    margin-top: 5px;
    font-size: 12px;
    color: var(--gris-medio);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.opsref-item-acciones {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.opsref-vacio {
    text-align: center;
    padding: 30px 20px;
    color: var(--gris-medio);
}

.opsref-vacio i {
    font-size: 32px;
    color: #cbd5e1;
    margin-bottom: 10px;
}

.opsref-vacio p {
    font-size: 13px;
    max-width: 380px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANTALLAS DE ADMINISTRADOR EN CELULAR
   ═══════════════════════════════════════════════════════════════════════════
   La prioridad de las vistas admin-* sigue siendo el computador y eso no cambia: TODO lo de
   aquí abajo vive dentro de media queries `max-width`, así que en escritorio no altera nada.
   Lo que resuelve es el otro caso real: el administrador haciendo un ajuste rápido desde el
   teléfono, donde hasta ahora las tablas se salían, los formularios de dos columnas quedaban
   espachurrados y los modales no cabían.

   Dos decisiones que conviene entender antes de tocar esto:

   1. Las tablas NO se convierten en tarjetas. Son tablas de datos densos que el admin lee
      comparando renglones (quién produjo más, qué lote va atrasado); partirlas en tarjetas
      destruye justo esa lectura. Se quedan con scroll horizontal y se les fija la PRIMERA
      columna, que es la que identifica el renglón, para no perder de vista de quién es la
      fila mientras se mira hacia la derecha.
   2. El menú de navegación pasa a ser una tira que se desliza, no una pila vertical. Apilado
      empujaba el contenido media pantalla hacia abajo en cada pantalla.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── Estructura general ────────────────────────────────────────────── */
    .contenedor-principal { padding: 0 12px; }

    .tarjeta { padding: 16px; border-radius: 12px; }

    .titulo-seccion    { font-size: 20px; }
    .subtitulo-seccion { font-size: 13px; }

    /* El header deja de apilarse en vertical: la marca arriba y la navegación como una
       tira deslizable debajo. Ocupa dos renglones en vez de seis. */
    .header-principal { padding: 14px 16px; gap: 12px; }

    .header-nav {
        flex-direction: row;
        gap: 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: 100%;
        padding-bottom: 2px;
    }
    .header-nav::-webkit-scrollbar { display: none; }

    /* El padding propio es lo que de verdad separa: con solo gap entre cajas, el texto de un
       enlace acababa pegado al del siguiente y se leía "InicioProducciónPersonal". De paso
       agranda la zona de toque, que con texto suelto era muy fina para el dedo. */
    .header-nav a {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 8px 14px;
        border-radius: 8px;
        line-height: 1.2;
    }

    /* Separador tenue entre enlaces: deja claro dónde acaba uno y empieza el otro sin meter
       tanto espacio que la tira deje de caber. */
    .header-nav a + a { box-shadow: inset 1px 0 0 #e2e8f0; }

    .header-nav a.active { background: #eff6ff; }

    /* ── Pestañas ──────────────────────────────────────────────────────── */
    /* Con 3 pestañas de 28px de padding no caben en 360px. Se deslizan. */
    .tabs-contenedor {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .tabs-contenedor::-webkit-scrollbar { display: none; }

    .tab {
        padding: 12px 16px;
        font-size: 14px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* ── Barra de acciones: buscador y botón, uno debajo del otro ──────── */
    .action-bar { flex-direction: column; align-items: stretch; gap: 10px; }

    .search-box { max-width: none; width: 100%; }

    .action-bar .btn-principal,
    .action-bar .btn-secundario { width: 100%; justify-content: center; }

    /* ── Tablas: scroll horizontal con la primera columna fija ─────────── */
    .tabla-contenedor {
        border-radius: 10px;
        -webkit-overflow-scrolling: touch;
    }

    .tabla-contenedor table { font-size: 13px; }

    .tabla-contenedor th,
    .tabla-contenedor td { padding: 10px 12px; white-space: nowrap; }

    /* La primera columna identifica el renglón (cédula, OM, referencia, nombre): se queda
       clavada a la izquierda para no perderla al desplazarse. El fondo es obligatorio, si
       no el contenido de las otras columnas se ve por debajo. */
    .tabla-contenedor th:first-child,
    .tabla-contenedor td:first-child {
        position: sticky;
        left: 0;
        background: var(--blanco);
        z-index: 2;
        box-shadow: 2px 0 4px -2px rgba(15, 23, 42, 0.15);
    }
    .tabla-contenedor thead th:first-child { z-index: 3; }

    /* ── Formularios ───────────────────────────────────────────────────── */
    .form-grid { grid-template-columns: 1fr; gap: 14px; }

    /* 16px evita que iOS haga zoom automático al enfocar un campo, que descoloca la
       pantalla entera y obliga a volver a alejar a mano. */
    .form-input, .form-select { font-size: 16px; padding: 11px 14px; }

    /* ── Modales: casi a pantalla completa ─────────────────────────────── */
    .modal-overlay { padding: 10px; align-items: flex-start; }

    .modal-contenido {
        width: 100%;
        max-width: none;
        max-height: 92vh;
        margin-top: 10px;
        border-radius: 14px;
    }

    .modal-header  { padding: 16px; }
    .modal-body    { padding: 16px; }
    .modal-header h2, .modal-titulo { font-size: 17px; }

    /* Botones a lo ancho y en orden invertido: la acción principal queda arriba, que es
       donde llega el pulgar sin recolocar el teléfono. */
    .modal-footer {
        flex-direction: column-reverse;
        gap: 8px;
        padding-top: 16px;
    }
    .modal-footer .btn-principal,
    .modal-footer .btn-secundario { width: 100%; justify-content: center; }

    /* ── Informes y monitoreo ──────────────────────────────────────────── */
    .informe-resumen-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
    .informe-card-resumen { padding: 14px; }
    .informe-card-valor   { font-size: 24px; }

    /* Los atajos de fecha son muchos: se dejan envolver en varias filas. */
    .rango-atajo-btn { font-size: 12px; padding: 7px 11px; }

    /* ── Operaciones dentro de la referencia ───────────────────────────── */
    .opsref-barra { flex-direction: column; align-items: stretch; }
    .opsref-barra .btn-principal { width: 100%; justify-content: center; }
    .opsref-form-acciones { flex-direction: column-reverse; }
    .opsref-form-acciones .btn-principal,
    .opsref-form-acciones .btn-secundario { width: 100%; justify-content: center; }

    /* Los botones de editar/eliminar bajan debajo del texto en vez de apretarlo. */
    .opsref-item { flex-direction: column; gap: 8px; }
    .opsref-item-acciones { align-self: flex-end; }

    /* ── Zona de toque ─────────────────────────────────────────────────── */
    /* Los botones de icono de las tablas eran de 8px de padding: imposibles de acertar con
       el dedo. 40px es el mínimo cómodo. */
    .btn-icono {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 480px) {

    .contenedor-principal { padding: 0 8px; }

    .tarjeta { padding: 12px; }

    .header-principal { padding: 12px; }

    .titulo-seccion { font-size: 18px; }

    .tabla-contenedor table { font-size: 12px; }
    .tabla-contenedor th,
    .tabla-contenedor td { padding: 8px 10px; }

    .tab { padding: 10px 13px; font-size: 13px; }

    .informe-resumen-grid { grid-template-columns: 1fr 1fr; }
    .informe-card-valor   { font-size: 21px; }

    .btn-principal, .btn-secundario { padding: 11px 16px; font-size: 14px; }

    /* Ya no cabe el texto del botón: se queda el icono y el número, que es lo que informa. */
    .btn-ops { padding: 7px 10px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MÓDULOS DE UN LOTE
   Un lote puede trabajarse en varios módulos a la vez, así que el desplegable de un solo
   módulo pasó a ser un grupo de casillas, y en la tabla se muestran como etiquetas.
   ═══════════════════════════════════════════════════════════════════════════ */

.modulos-check {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: var(--blanco);
}

/* La casilla entera es clicable, no solo el cuadrito: con el dedo el cuadrito solo es
   demasiado pequeño para acertar. */
.modulo-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
    transition: border-color 0.15s, background 0.15s;
}

.modulo-check:hover { border-color: #cbd5e1; }

.modulo-check input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--azul-cobalto); }

/* :has() permite resaltar la etiqueta entera cuando su casilla está marcada, sin JavaScript.
   Donde el navegador no lo soporte simplemente no se resalta: la casilla se sigue viendo
   marcada y nada deja de funcionar. */
.modulo-check:has(input:checked) {
    border-color: var(--azul-cobalto);
    background: #eff6ff;
    font-weight: 600;
}

.modulos-ayuda {
    font-size: 12px;
    color: var(--gris-medio);
    margin-top: 6px;
    line-height: 1.45;
}

.modulo-tag {
    display: inline-block;
    background: #e0e7ff;
    color: var(--azul-oscuro);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANEL DEL PROVEEDOR (master.html)
   Deliberadamente sobrio y distinto del panel de un cliente: quien entra aquí tiene que
   notar de inmediato que no está en la aplicación de una empresa, sino por encima de todas.
   ═══════════════════════════════════════════════════════════════════════════ */

.master-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--negro);
}

.master-login-caja {
    background: var(--blanco);
    border-radius: 16px;
    padding: 32px;
    width: 100%;
    max-width: 420px;
}

.master-marca {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.master-marca i {
    font-size: 26px;
    color: var(--azul-cobalto);
}

.master-marca h1 { font-size: 20px; margin: 0; color: var(--negro); }
.master-marca p  { font-size: 13px; margin: 2px 0 0; color: var(--gris-medio); }

/* Etiqueta permanente en la cabecera: recuerda en todo momento dónde se está parado. */
.master-etiqueta {
    background: var(--negro);
    color: var(--blanco);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-left: 10px;
}

/* Una empresa suspendida se ve apagada, no solo con una etiqueta: de un vistazo se
   distingue quién está fuera de servicio. */
.fila-suspendida { background: #fef2f2; }
.fila-suspendida td:first-child strong { color: var(--gris-medio); }

/* Alta de empresas y administradores desde el panel del proveedor. */
.alta-seccion {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gris-medio);
    margin: 4px 0 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid #e2e8f0;
}

.alta-ayuda {
    font-size: 11px;
    color: var(--gris-medio);
    margin: 5px 0 0;
    line-height: 1.4;
}

.alta-nota {
    font-size: 12px;
    color: var(--gris-medio);
    background: var(--gris-claro);
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 16px;
    line-height: 1.5;
}

/* Las credenciales recién creadas: se muestran una sola vez y hay que poder copiarlas de un
   vistazo, así que van en renglones anchos y con la fuente monoespaciada. */
.alta-credenciales {
    background: var(--gris-claro);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 10px;
}

.alta-credenciales div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px solid #e2e8f0;
}

.alta-credenciales div:last-child { border-bottom: none; }

.alta-credenciales span {
    font-size: 12px;
    color: var(--gris-medio);
}

.alta-credenciales strong {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 14px;
    color: var(--negro);
    user-select: all;          /* un clic selecciona el valor entero */
    overflow-wrap: anywhere;
    text-align: right;
}