/* Grupos de trabajo (plan 5.12): panel del ticket y ventana de escalamiento.
   En un archivo cargado en el <head> (panels/styles): como <style> dentro del cuerpo, la pantalla de Tickets V2
   los perdía y el panel y la ventana salían sin estilo (prueba en navegador, 2026-09-27). */

/* --- ventana --- */
    .esc-modal { position: fixed; inset: 0; z-index: 1060; background: rgba(15, 23, 42, .45); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow-y: auto; }
    .esc-modal-caja { background: #fff; border-radius: 8px; width: 100%; max-width: 560px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
    .esc-modal-cabecera, .esc-modal-pie { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; }
    .esc-modal-pie { border-bottom: 0; border-top: 1px solid #e5e7eb; justify-content: flex-end; gap: 8px; }
    .esc-modal-cuerpo { padding: 16px; }
    .esc-cerrar { background: none; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; }
    /* El aspecto del panel (.esc-panel) vive en _panel_escalamiento: aquí solo la ventana */

/* --- panel --- */
    .esc-panel { font-size: 0.85rem; color: #2c2c2c; }
    .esc-panel .esc-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.4rem; }
    .esc-panel .esc-etiqueta { font-size: 0.75rem; font-weight: 600; color: #6c757d; white-space: nowrap; }
    .esc-panel .esc-valor { font-size: 0.85rem; font-weight: 600; color: #2c2c2c; text-align: right; word-break: break-word; }
    .esc-panel .esc-tiempo { font-size: 0.75rem; color: #6c757d; margin-top: 0.35rem; line-height: 1.35; }
    .esc-panel .esc-tiempo i { font-size: 0.7rem; }
    .esc-panel .esc-sla { margin-top: 0.4rem; }
    .esc-panel .esc-sla .badge { font-size: 0.72rem; white-space: normal; text-align: left; }
    .esc-panel .esc-bloque { padding-bottom: 0.75rem; margin-bottom: 0.75rem; border-bottom: 1px solid #f1f1f4; }
    .esc-panel .esc-botones { display: flex; flex-wrap: wrap; gap: 0.4rem; }
    .esc-panel button.esc-boton { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0;
        display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.4rem 0.75rem;
        font-family: inherit; font-size: 0.75rem; font-weight: 600; line-height: 1.2; color: #fff; background: #7367f0;
        border: 0; border-radius: 5px; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; text-decoration: none; }
    .esc-panel button.esc-boton:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); color: #fff; }
    .esc-panel button.esc-boton:focus { outline: 0; box-shadow: 0 0 0 0.15rem rgba(115, 103, 240, 0.35); }
    .esc-panel button.esc-boton i { font-size: 0.8rem; }
    .esc-panel button.esc-boton-escalar { background: #00cfe8; }
    .esc-panel button.esc-boton-tomar { background: #28c76f; }
    .esc-panel button.esc-boton-reasignar { background: #7367f0; }
    .esc-panel button.esc-boton-devolver { background: #82868b; }
    .esc-panel button.esc-boton-insistir { background: #ff9f43; }
    .esc-panel .esc-motivo { font-size: 0.75rem; color: #6c757d; width: 100%; }
    .esc-panel .esc-motivo i { font-size: 0.72rem; }
    .esc-panel .esc-enlace { font-size: 0.8rem; font-weight: 600; color: #7367f0; text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; }
    .esc-panel .esc-historial { font-size: 0.72rem; }
    .esc-panel .esc-historial-item { padding: 0.4rem 0.5rem; margin-top: 0.4rem; background: #f8f8f8; border-radius: 4px; border-left: 3px solid #00cfe8; }
    .esc-panel .esc-nota { font-size: 0.7rem; color: #9a98a6; display: block; margin-top: 0.6rem; line-height: 1.3; }
    .esc-tarjeta { border: 1px solid #e9ecef; border-radius: 6px; padding: 0.6rem 0.75rem; background: #fff; }
    /* Barra lateral de V2 (tarjeta angosta, como "Cliente / Zona" y "Pausas de Reloj"): etiqueta arriba, valor abajo,
       botones que llenan la fila al envolverse */
    .esc-panel.esc-sidebar .esc-fila { flex-direction: column; align-items: flex-start; gap: 0.15rem; margin-bottom: 0.65rem; }
    .esc-panel.esc-sidebar .esc-etiqueta { text-transform: uppercase; letter-spacing: 0.5px; }
    .esc-panel.esc-sidebar .esc-valor { font-size: 0.9rem; font-weight: 500; text-align: left; }
    .esc-panel.esc-sidebar button.esc-boton { flex: 1 1 auto; }