/* =============================================================================
   IRT · Actividades técnicos
   Estilos de actividades.php (login y bandeja) y ticket.php (detalle).
   ============================================================================= */

:root{
    /* Marca */
    --color-primary:#2563eb;
    --color-primary-dark:#1d4ed8;
    --color-primary-soft:#eff6ff;
    --color-primary-ring:rgba(37,99,235,.25);

    /* Estados */
    --color-success:#16a34a;
    --color-success-soft:#dcfce7;
    --color-success-text:#166534;
    --color-danger:#dc2626;
    --color-danger-soft:#fee2e2;
    --color-danger-text:#991b1b;
    --color-warning:#d97706;
    --color-warning-soft:#fef3c7;
    --color-warning-text:#92400e;

    /* Superficies y texto */
    --color-bg:#f1f5f9;
    --color-card:#ffffff;
    --color-text:#0f172a;
    --color-text-2:#334155;
    --color-muted:#64748b;
    --color-border:#e2e8f0;
    --color-border-strong:#cbd5e1;
    --color-hover:#f8fafc;

    --radio:12px;
    --radio-sm:8px;
    --sombra:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
    --sombra-hover:0 4px 12px rgba(15,23,42,.10);
    --sombra-modal:0 20px 50px rgba(15,23,42,.25);

    --fuente:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

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

body{
    font-family:var(--fuente);
    font-size:15px;
    line-height:1.5;
    background:var(--color-bg);
    color:var(--color-text);
    -webkit-font-smoothing:antialiased;
}

a{ color:var(--color-primary); }

h1, h2, h3{ line-height:1.25; }

:focus-visible{
    outline:3px solid var(--color-primary-ring);
    outline-offset:2px;
}

[hidden]{ display:none !important; }

/* ---------- Encabezado ---------- */

.header{
    position:sticky;
    top:0;
    z-index:50;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:12px 20px;
    background:var(--color-card);
    border-bottom:1px solid var(--color-border);
}

.marca{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    color:var(--color-text);
    text-decoration:none;
}

.marca-icono{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:10px;
    background:var(--color-primary);
    color:#fff;
    font-size:18px;
}

.marca-logo{
    flex:0 0 auto;
    height:40px;
    width:auto;
    display:block;
}

.marca-texto{ display:flex; flex-direction:column; min-width:0; }
.marca-texto strong{ font-size:16px; }
.marca-texto span{ font-size:13px; color:var(--color-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.usuario{
    display:flex;
    align-items:center;
    gap:10px;
}

.usuario-nombre{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    color:var(--color-text-2);
}

.usuario-nombre i{ color:var(--color-muted); }

.logout{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 12px;
    border:1px solid var(--color-border);
    border-radius:var(--radio-sm);
    color:var(--color-text-2);
    font-size:14px;
    text-decoration:none;
}

.logout:hover{ background:var(--color-hover); border-color:var(--color-border-strong); }

.volver{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:10px;
    border:1px solid var(--color-border);
    color:var(--color-text);
    text-decoration:none;
}

.volver:hover{ background:var(--color-hover); }

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

/* ---------- Formularios ---------- */

input{
    width:100%;
    padding:11px 12px;
    border:1px solid var(--color-border-strong);
    border-radius:var(--radio-sm);
    background:#fff;
    color:var(--color-text);
    font:inherit;
    font-size:16px; /* evita el zoom automático en iOS */
    transition:border-color .15s, box-shadow .15s;
}

input:focus{
    outline:none;
    border-color:var(--color-primary);
    box-shadow:0 0 0 3px var(--color-primary-ring);
}

input::placeholder{ color:#94a3b8; }

select{
    width:100%;
    padding:11px 36px 11px 12px;
    border:1px solid var(--color-border-strong);
    border-radius:var(--radio-sm);
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E") no-repeat right 10px center / 18px;
    color:var(--color-text);
    font:inherit;
    font-size:16px;
    appearance:none;
}

select:focus{
    outline:none;
    border-color:var(--color-primary);
    box-shadow:0 0 0 3px var(--color-primary-ring);
}

label{
    display:block;
    margin:14px 0 6px;
    font-size:14px;
    font-weight:600;
    color:var(--color-text-2);
}

.check{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:600;
}

.check input{ width:18px; height:18px; accent-color:var(--color-primary); }

.campo-clave{ display:flex; gap:8px; }
.campo-clave input{ flex:1; min-width:0; }
.campo-clave button{ white-space:nowrap; }

/* ---------- Botones ---------- */

.btn,
.btn-primary,
.btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 16px;
    border:1px solid transparent;
    border-radius:var(--radio-sm);
    font:inherit;
    font-size:15px;
    font-weight:600;
    text-decoration:none;
    cursor:pointer;
    transition:background .15s, border-color .15s, box-shadow .15s;
}

.btn-primary,
.btn-detalle{ background:var(--color-primary); color:#fff; }

.btn-primary:hover,
.btn-detalle:hover{ background:var(--color-primary-dark); }

.btn-secondary{
    background:#fff;
    color:var(--color-text-2);
    border-color:var(--color-border-strong);
}

.btn-secondary:hover{ background:var(--color-hover); }

.btn-primary:disabled,
.btn-secondary:disabled{ opacity:.6; cursor:not-allowed; }

.btn-block{ display:flex; width:100%; margin-top:16px; }

.btn-abrir{ width:100%; margin-top:8px; }

/* Llamar / WhatsApp / Mapa */
.acciones{
    display:flex;
    gap:8px;
}

.btn-llamar,
.btn-whatsapp,
.btn-mapa{
    flex:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:9px 8px;
    border:1px solid var(--color-border);
    border-radius:var(--radio-sm);
    background:#fff;
    color:var(--color-text-2);
    font-size:14px;
    font-weight:600;
    text-decoration:none;
}

.btn-llamar:hover,
.btn-whatsapp:hover,
.btn-mapa:hover{ background:var(--color-hover); border-color:var(--color-border-strong); }

.btn-llamar i{ color:var(--color-primary); }
.btn-whatsapp i{ color:#16a34a; }
.btn-mapa i{ color:#ea580c; }

/* ---------- Login ---------- */

.modal{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:16px;
    background:
        radial-gradient(circle at 20% 10%, rgba(37,99,235,.18), transparent 45%),
        radial-gradient(circle at 85% 90%, rgba(37,99,235,.12), transparent 40%),
        var(--color-bg);
}

.modal-content{
    width:100%;
    max-width:380px;
    padding:28px;
    background:var(--color-card);
    border:1px solid var(--color-border);
    border-radius:16px;
    box-shadow:var(--sombra-hover);
}

.login-marca{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
    text-align:center;
}

.login-logo{ height:96px; width:auto; }
.login-marca h2{ font-size:20px; }
.login-marca p{ font-size:14px; color:var(--color-muted); }

.error{
    color:var(--color-danger-text);
}

.modal-content .error{
    margin-bottom:6px;
    padding:10px 12px;
    border-radius:var(--radio-sm);
    background:var(--color-danger-soft);
    font-size:14px;
}

/* ---------- Bandeja ---------- */

.titulo-pagina{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
    margin-bottom:14px;
}

.titulo-pagina h1{ font-size:22px; }
.titulo-pagina span{ font-size:14px; color:var(--color-muted); }

.herramientas{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
}

.buscador{
    position:relative;
    flex:1 1 320px;
}

.buscador i{
    position:absolute;
    left:13px;
    top:50%;
    transform:translateY(-50%);
    color:var(--color-muted);
    pointer-events:none;
}

.buscador input{ padding-left:38px; background:#fff; }

.filtros{
    display:flex;
    gap:4px;
    padding:4px;
    border:1px solid var(--color-border);
    border-radius:10px;
    background:#fff;
}

.filtro{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 12px;
    border:none;
    border-radius:7px;
    background:transparent;
    color:var(--color-text-2);
    font:inherit;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
}

.filtro:hover{ background:var(--color-hover); }

.filtro span{
    min-width:22px;
    padding:0 6px;
    border-radius:999px;
    background:#f1f5f9;
    color:var(--color-muted);
    font-size:12px;
    text-align:center;
}

.filtro.activo{ background:var(--color-primary); color:#fff; }
.filtro.activo span{ background:rgba(255,255,255,.22); color:#fff; }

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap:16px;
}

/* ---------- Tarjeta de ticket ---------- */

.card{
    display:flex;
    flex-direction:column;
    padding:18px;
    background:var(--color-card);
    border:1px solid var(--color-border);
    border-radius:var(--radio);
    box-shadow:var(--sombra);
    transition:box-shadow .15s, border-color .15s;
}

.card:hover{ box-shadow:var(--sombra-hover); border-color:var(--color-border-strong); }

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

.ticket-numero{
    font-size:14px;
    font-weight:700;
    color:var(--color-primary);
    letter-spacing:.01em;
}

.estado-ticket{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:3px 10px;
    border-radius:999px;
    background:var(--color-primary-soft);
    color:var(--color-primary-dark);
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
}

.estado-ticket::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:currentColor;
}

.estado-en-progreso{ background:var(--color-warning-soft); color:var(--color-warning-text); }
.estado-otro{ background:#f1f5f9; color:var(--color-text-2); }

/* Estado en la bandeja y en el detalle: el color siempre va con su texto.
   Azul abierto · naranja en proceso · verde cerrado · rojo requiere atención · morado desconocido */
.estado-grupo{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:3px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
}

.estado-grupo::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:currentColor;
}

.estado-grupo--abierto{ background:var(--color-primary-soft); color:var(--color-primary-dark); }
.estado-grupo--en-proceso{ background:#ffedd5; color:#9a3412; }
.estado-grupo--cerrado{ background:var(--color-success-soft); color:var(--color-success-text); }
.estado-grupo--desconocido{ background:#f3e8ff; color:#6b21a8; }

/* Borde izquierdo de color según estado (alerta tiene prioridad) */
.card--abierto{ border-left:4px solid var(--color-primary); }
.card--en-proceso{ border-left:4px solid #ea580c; }
.card--cerrado{ border-left:4px solid var(--color-success); background:#fbfefc; }
.card--desconocido{ border-left:4px solid #9333ea; }
.card--alerta{ border-left:4px solid var(--color-danger); }

.card-etiquetas{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:8px;
}

.tipo-actividad,
.alerta-ticket{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:2px 9px;
    border-radius:var(--radio-sm);
    font-size:12px;
    font-weight:600;
}

.tipo-actividad{ background:#f1f5f9; color:var(--color-text-2); }
.tipo-actividad--instalacion{ background:#e0f2fe; color:#075985; }
.tipo-actividad--reparacion{ background:#fef3c7; color:#92400e; }
.tipo-actividad--traslado{ background:#ede9fe; color:#5b21b6; }
.tipo-actividad--recoleccion{ background:#ecfccb; color:#3f6212; }
.tipo-actividad--otro{ background:#f3e8ff; color:#6b21a8; }

.alerta-ticket{ background:var(--color-danger-soft); color:var(--color-danger-text); }

/* Ticket cerrado: "Ver ticket" (solo lectura) en lugar del botón principal */
.btn-detalle.btn-ver{
    background:#fff;
    color:var(--color-success-text);
    border:1px solid #86efac;
}

.btn-detalle.btn-ver:hover{ background:var(--color-success-soft); }

/* Filtros por tipo y localidad */
.filtros-select{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.filtro-select{
    display:flex;
    align-items:center;
    gap:6px;
    padding:0 4px 0 10px;
    border:1px solid var(--color-border);
    border-radius:10px;
    background:#fff;
    font-size:13px;
    font-weight:600;
    color:var(--color-muted);
}

.filtro-select select{
    width:auto;
    max-width:180px;
    margin:0;
    padding:7px 6px;
    border:none;
    background:transparent;
    font:inherit;
    font-size:14px;
    color:var(--color-text);
}

.filtro-select select:focus{ outline:2px solid var(--color-primary-ring); border-radius:6px; }

.filtro--alerta.activo{ background:var(--color-danger); }
.filtro--cerrado.activo{ background:var(--color-success); }
.filtro--en-proceso.activo{ background:#ea580c; }

.cargando-cerrados{
    margin-top:16px;
    padding:14px;
    text-align:center;
    font-size:14px;
    color:var(--color-muted);
}

.btn-link{
    border:none;
    background:none;
    color:var(--color-primary);
    font:inherit;
    font-weight:600;
    text-decoration:underline;
    cursor:pointer;
}

.aviso-solo-lectura{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:14px;
    border:1px solid var(--color-border);
    border-radius:var(--radio-sm);
    background:var(--color-hover);
    color:var(--color-text-2);
    font-size:14px;
}

.aviso-solo-lectura i{ margin-top:3px; color:var(--color-muted); }

.cliente{
    font-size:17px;
    font-weight:700;
    line-height:1.3;
    color:var(--color-text);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.asunto-ticket{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:8px;
    font-weight:600;
    color:var(--color-text-2);
}

.asunto-ticket i{ color:var(--color-primary); }

.descripcion-ticket{
    margin-top:4px;
    color:var(--color-muted);
    font-size:14px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.meta{
    list-style:none;
    display:grid;
    gap:6px;
    margin:14px 0;
    padding:12px 0;
    border-top:1px solid var(--color-border);
    border-bottom:1px solid var(--color-border);
}

.info{
    display:flex;
    align-items:flex-start;
    gap:8px;
    font-size:14px;
    color:var(--color-text-2);
    min-width:0;
}

.info i{
    flex:0 0 16px;
    margin-top:3px;
    color:var(--color-muted);
    text-align:center;
}

.prioridad-contenedor{ margin-bottom:12px; }

.badge{
    display:inline-block;
    padding:3px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.alta{ background:var(--color-danger-soft); color:var(--color-danger-text); }
.media{ background:var(--color-warning-soft); color:var(--color-warning-text); }
.baja{ background:var(--color-success-soft); color:var(--color-success-text); }

.card-actions{ margin-top:auto; }

/* ---------- Estados vacíos ---------- */

.sin-tickets{
    padding:48px 20px;
    border:1px dashed var(--color-border-strong);
    border-radius:var(--radio);
    background:var(--color-card);
    text-align:center;
    color:var(--color-muted);
}

.sin-tickets i{
    display:block;
    margin-bottom:10px;
    font-size:28px;
    color:#94a3b8;
}

.sin-tickets.error{ border-color:#fecaca; background:#fff7f7; }
.sin-tickets.error i{ color:var(--color-danger); }
.sin-tickets p{ margin-top:10px; }

/* ---------- Página del ticket (ticket.php) ---------- */

.detalle-ticket{
    max-width:900px;
    margin:0 auto;
    background:var(--color-card);
    border:1px solid var(--color-border);
    border-radius:16px;
    box-shadow:var(--sombra);
}

.ticket-cabecera{
    padding:20px 22px 14px;
    border-bottom:1px solid var(--color-border);
}

.ticket-cabecera-fila{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.ticket-cabecera h1{ font-size:15px; font-weight:700; color:var(--color-primary); }

.ticket-cabecera-cliente{
    margin:4px 0 10px;
    font-size:21px;
    font-weight:800;
    line-height:1.25;
}

.ticket-cabecera-datos{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.ticket-cabecera-datos span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    border-radius:999px;
    background:#f1f5f9;
    color:var(--color-text-2);
    font-size:13px;
}

.ticket-cabecera-datos span:first-child{ background:var(--color-primary-soft); color:var(--color-primary-dark); font-weight:600; }

.ticket-descripcion{ margin-top:12px; font-size:14px; }
.ticket-descripcion summary{ cursor:pointer; color:var(--color-primary); font-weight:600; }
.ticket-descripcion p{
    margin-top:8px;
    padding:12px;
    border-radius:var(--radio-sm);
    background:#f8fafc;
    color:var(--color-text-2);
}

.texto-largo{ white-space:pre-line; }

/* Pestañas */
.tabs{
    position:sticky;
    top:65px; /* debajo del encabezado fijo */
    z-index:10;
    display:flex;
    gap:2px;
    padding:0 12px;
    overflow-x:auto;
    background:var(--color-card);
    border-bottom:1px solid var(--color-border);
    scrollbar-width:none;
}

.tabs::-webkit-scrollbar{ display:none; }

.tab{
    flex:0 0 auto;
    padding:13px 14px;
    border:none;
    border-bottom:2px solid transparent;
    background:none;
    color:var(--color-muted);
    font:inherit;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
}

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

.tab[aria-selected="true"]{
    color:var(--color-primary);
    border-bottom-color:var(--color-primary);
}

.tab-panel{ padding:18px 22px 26px; }

.tab-panel h3{
    margin:22px 0 8px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--color-muted);
}

.tab-panel h3:first-child{ margin-top:0; }
.tab-panel a{ color:var(--color-primary); }

/* Los botones con enlace dentro de las pestañas conservan su texto blanco (antes quedaba azul sobre azul). */
.tab-panel a.btn-primary,
.tab-panel a.btn-primary:hover{ color:#fff; text-decoration:none; }
.tab-panel .acciones{ margin:10px 0 6px; }

/* Filas "etiqueta → valor" */
.fila{
    display:grid;
    grid-template-columns:minmax(120px, 38%) 1fr;
    gap:12px;
    padding:9px 0;
    border-bottom:1px solid #f1f5f9;
    font-size:15px;
}

.fila:last-of-type{ border-bottom:none; }
.etiqueta{ color:var(--color-muted); }
.valor{ color:var(--color-text); font-weight:500; word-break:break-word; }

.subtitulo{
    margin:16px 0 2px;
    font-size:13px;
    font-weight:700;
    color:var(--color-text-2);
}

.enlaces-mapa{ display:flex; gap:16px; flex-wrap:wrap; margin:8px 0 4px; }
.enlaces-mapa a{ font-weight:600; text-decoration:none; }

.pendiente{
    padding:28px 16px;
    border:1px dashed var(--color-border-strong);
    border-radius:var(--radio);
    text-align:center;
    color:var(--color-muted);
}

.aviso{
    margin:10px 0;
    padding:10px 12px;
    border-radius:var(--radio-sm);
    background:var(--color-warning-soft);
    color:var(--color-warning-text);
    font-size:14px;
}

.nota,
.no-disponible{ color:var(--color-muted); font-size:14px; }

/* Indicadores del equipo (pestaña Técnico) */
.indicador{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:2px 10px;
    border-radius:999px;
    font-weight:700;
    font-size:13px;
}

.indicador::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.indicador.bien{ background:var(--color-success-soft); color:var(--color-success-text); }
.indicador.alerta{ background:var(--color-warning-soft); color:var(--color-warning-text); }
.indicador.mal{ background:var(--color-danger-soft); color:var(--color-danger-text); }
.indicador.neutro{ background:#f1f5f9; color:var(--color-text-2); }

/* Pestaña Equipos */
#formBuscarEquipo label{ margin-top:0; }

#mensajeEquipo{
    margin:12px 0;
    padding:10px 12px;
    border-radius:var(--radio-sm);
    background:#f8fafc;
    color:var(--color-text-2);
    font-size:14px;
    font-weight:600;
}

#mensajeEquipo:empty{ display:none; }

#redesEquipo{ margin-top:14px; }

.form-wlan{
    margin-top:16px;
    padding:16px;
    border:1px solid var(--color-border);
    border-radius:var(--radio);
    background:#fcfdff;
}

.form-wlan-titulo{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-bottom:4px;
}

.form-wlan-titulo h3{ margin:0; }

.banda{
    padding:2px 9px;
    border-radius:999px;
    background:var(--color-primary-soft);
    color:var(--color-primary-dark);
    font-size:12px;
    font-weight:700;
}

.banda-desconocida{ background:#f1f5f9; color:var(--color-muted); font-weight:600; }

.form-wlan input:disabled,
.form-wlan button:disabled{ opacity:.55; cursor:not-allowed; }

.equipo-resumen{ margin-bottom:6px; }

.equipo-acciones{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 12px;
    margin:12px 0 4px;
}

/* Pestaña Materiales */
.material-campos{
    display:grid;
    grid-template-columns:1fr 160px auto;
    gap:10px;
    align-items:end;
}

.material-campos label{ margin-top:0; }
.material-campos .btn-primary{ height:46px; }

#mensajeMateriales{
    margin:12px 0;
    padding:10px 12px;
    border-radius:var(--radio-sm);
    background:var(--color-danger-soft);
    color:var(--color-danger-text);
    font-size:14px;
    font-weight:600;
}

#mensajeMateriales.ok{ background:var(--color-success-soft); color:var(--color-success-text); }
#mensajeMateriales:empty{ display:none; }

#listaMateriales{ margin-top:18px; }

.lista-materiales{
    list-style:none;
    border:1px solid var(--color-border);
    border-radius:var(--radio);
    overflow:hidden;
}

.item-material{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    background:#fff;
}

.item-material + .item-material{ border-top:1px solid var(--color-border); }

.item-nombre{ display:flex; flex-direction:column; min-width:0; }

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

.item-cantidad{ width:90px; padding:8px 10px; text-align:right; }
.item-unidad{ min-width:62px; font-size:14px; color:var(--color-muted); }
.btn-guardar-item{ padding:8px 12px; }

.btn-icono{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border:1px solid var(--color-border);
    border-radius:var(--radio-sm);
    background:#fff;
    color:var(--color-danger);
    cursor:pointer;
}

.btn-icono:hover{ background:var(--color-danger-soft); border-color:#fecaca; }

/* Pestaña Cerrar */
textarea{
    width:100%;
    padding:11px 12px;
    border:1px solid var(--color-border-strong);
    border-radius:var(--radio-sm);
    background:#fff;
    color:var(--color-text);
    font:inherit;
    font-size:16px;
    resize:vertical;
}

textarea:focus{
    outline:none;
    border-color:var(--color-primary);
    box-shadow:0 0 0 3px var(--color-primary-ring);
}

.form-cierre label:first-of-type{ margin-top:0; }
.form-cierre .nota{ margin-top:14px; }

#mensajeCierre{
    margin:0 0 12px;
    padding:10px 12px;
    border-radius:var(--radio-sm);
    background:var(--color-danger-soft);
    color:var(--color-danger-text);
    font-size:14px;
    font-weight:600;
}

#mensajeCierre.ok{ background:var(--color-success-soft); color:var(--color-success-text); }
#mensajeCierre:empty{ display:none; }

.resumen-materiales{
    list-style:none;
    border:1px solid var(--color-border);
    border-radius:var(--radio-sm);
}

.resumen-materiales li{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:9px 12px;
}

.resumen-materiales li + li{ border-top:1px solid var(--color-border); }

.estado-sync{
    margin:6px 0 14px;
    padding:12px 14px;
    border-radius:var(--radio-sm);
    font-size:14px;
}

.estado-sync.ok{ background:var(--color-success-soft); color:var(--color-success-text); }
.estado-sync.error{ background:var(--color-warning-soft); color:var(--color-warning-text); }
.estado-sync.error .btn-primary{ margin-top:10px; }

.cierre-hecho .btn-block,
#estadoCierre > .btn-block{ margin-top:20px; }

.cierre-anterior{ margin:4px 0 16px; font-size:14px; }
.cierre-anterior summary{ cursor:pointer; color:var(--color-primary); font-weight:600; margin-bottom:6px; }

/* ---------- Modales ---------- */

.modal-detalle{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    justify-content:center;
    align-items:center;
    padding:12px;
    background:rgba(15,23,42,.55);
    backdrop-filter:blur(2px);
}

.modal-box{
    position:relative;
    width:100%;
    max-width:520px;
    max-height:90vh;
    overflow:auto;
    padding:24px;
    background:var(--color-card);
    border-radius:16px;
    box-shadow:var(--sombra-modal);
}

.modal-box h2{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
    font-size:19px;
}

.modal-box > p{ color:var(--color-text-2); }

.cerrar{
    position:absolute;
    top:12px;
    right:12px;
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border:none;
    border-radius:8px;
    background:transparent;
    color:var(--color-muted);
    font-size:24px;
    line-height:1;
    cursor:pointer;
}

.cerrar:hover{ background:#f1f5f9; color:var(--color-text); }


#datosConfirmacion{
    margin:14px 0 18px;
    padding:12px 14px;
    border-radius:var(--radio-sm);
    background:#f8fafc;
    line-height:1.7;
    word-break:break-all;
}

#datosConfirmacion p + p{ margin-top:6px; }
#datosConfirmacion strong{ color:var(--color-muted); font-weight:600; font-size:13px; }

#tituloConfirmacion i,
#tituloPregunta i{ color:var(--color-warning); }

#mensajePregunta{ margin:8px 0 20px; color:var(--color-text-2); }

.btn-peligro{ background:var(--color-danger); }
.btn-peligro:hover{ background:#b91c1c; }

.acciones-confirmacion{
    display:flex;
    gap:10px;
    justify-content:flex-end;
}

.contenido-exito{ text-align:center; }
.icono-exito{ margin-bottom:8px; font-size:48px; color:var(--color-success); }
.icono-exito.en-cola{ color:var(--color-warning); }
.contenido-exito h2{ justify-content:center; }
#mensajeExitoWifi{ margin:10px 0; word-break:break-all; color:var(--color-text-2); }

/* ---------- Celular ---------- */

@media (max-width:768px){

    body{ font-size:15px; }

    .header{ padding:10px 14px; }
    .usuario-nombre,
    .marca-texto span{ display:none; }
    .logout span{ display:none; }

    .container{ padding:12px; }

    .titulo-pagina h1{ font-size:19px; }

    .filtros{ width:100%; flex-wrap:wrap; }
    .filtro{ flex:1 1 auto; justify-content:center; gap:5px; padding:8px 6px; font-size:13px; white-space:nowrap; }

    .herramientas{ gap:10px; margin-bottom:14px; }
    .filtros-select{ width:100%; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .filtro-select{ min-width:0; }
    .filtro-select select{ flex:1; width:100%; max-width:none; min-width:0; text-overflow:ellipsis; }
    .filtro span{ min-width:20px; padding:0 5px; }

    .card{ padding:16px; }

    /* El ticket ocupa todo el ancho */
    .detalle-ticket{
        margin:-12px -12px 0;
        border-radius:0;
        border-left:none;
        border-right:none;
    }

    .ticket-cabecera{ padding:16px; }
    .ticket-cabecera-cliente{ font-size:19px; }

    .tabs{ top:61px; padding:0 4px; gap:0; }
    .tab{ flex:1 0 auto; padding:12px 5px; font-size:13px; }
    .tab-panel{ padding:14px 16px 24px; }

    .fila{ grid-template-columns:1fr; gap:2px; }
    .etiqueta{ font-size:13px; }

    .tab-panel .acciones,
    .card .acciones{ flex-wrap:wrap; }

    .material-campos{ grid-template-columns:1fr 1fr; }
    .material-select{ grid-column:1 / -1; }
    .material-campos .btn-primary{ height:auto; padding:11px; }

    .item-material{ flex-direction:column; align-items:stretch; gap:8px; }
    .item-acciones{ justify-content:flex-end; }
    .item-cantidad{ flex:1; width:auto; }

    .acciones-confirmacion{ flex-direction:column-reverse; }
    .acciones-confirmacion button{ width:100%; }
}

/* ---------- Pestaña Historial ---------- */

.historial-item{
    padding:14px;
    margin-top:12px;
    border:1px solid var(--color-border);
    border-left:4px solid var(--color-success);
    border-radius:var(--radio-sm);
    background:var(--color-card);
}

.historial-item--abierta{ border-left-color:var(--color-primary); }

.historial-cabecera{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    margin-bottom:8px;
}

.historial-item h4{ margin:12px 0 6px; font-size:14px; }

.historial-sync{
    padding:2px 9px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.historial-sync--ok{ background:var(--color-success-soft); color:var(--color-success-text); }
.historial-sync--error{ background:var(--color-warning-soft); color:var(--color-warning-text); }