/* ============================================================
   MASTER.CSS - Hoja de estilos principal
   Desarrollado por Iñaki Serrano para Webcomunica.solutions
   Colores corporativos: #13448C | #3E4B64 | #ffffff | #000000
   ============================================================ */


/* --------------------------------------------------------
   RESET Y BASE
   -------------------------------------------------------- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 15px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #f2f3f5;
    color: #000000;
    line-height: 1.6;
    min-height: 100vh;
}

a {
    color: #13448C;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img, video, audio {
    max-width: 100%;
}

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


/* --------------------------------------------------------
   LAYOUT GENERAL
   -------------------------------------------------------- */
.contenedor {
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 20px;
}

.cabecera {
    background: #13448C;
    color: #ffffff;
    padding: 12px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cabecera-logo {
    height: auto;
    width: 250px;
    background: #ffffff;
    padding: 6px 16px;
    border-radius: 4px;
}

.cabecera-derecha {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 0.9rem;
}

.cabecera-derecha span {
    color: rgba(255,255,255,0.7);
}

.cabecera-derecha a {
    color: rgba(255,255,255,0.85);
    transition: color 0.2s;
}

.cabecera-derecha a:hover {
    color: #ffffff;
    text-decoration: none;
}


/* --------------------------------------------------------
   LOGIN - Pantalla dividida
   -------------------------------------------------------- */
.login-pagina {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

/* Panel izquierdo: branding sobre blanco */
.login-panel-izquierdo {
    flex: 1;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 50px;
}

.login-branding {
    text-align: center;
}

.login-logo-grande {
    max-width: 420px;
    margin-bottom: 36px;
}

.login-titulo {
    font-size: 1.1rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 8px;
    white-space: nowrap;
}

.login-subtitulo {
    color: #3E4B64;
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* Panel derecho: formulario sobre azul con efectos */
.login-panel-derecho {
    flex: 1;
    background: #13448C;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 40px;
    position: relative;
    overflow: hidden;
}

/* Circulos decorativos sutiles */
.login-efecto-circulo {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.07);
}

.login-efecto-circulo-1 {
    width: 500px;
    height: 500px;
    top: -180px;
    right: -120px;
}

.login-efecto-circulo-2 {
    width: 350px;
    height: 350px;
    bottom: -100px;
    left: -80px;
}

.login-efecto-circulo-3 {
    width: 200px;
    height: 200px;
    bottom: 60px;
    right: 40px;
    border-color: rgba(255,255,255,0.04);
}

.login-formulario-contenedor {
    width: 100%;
    max-width: 380px;
    position: relative;
    z-index: 2;
}

/* Inputs y labels sobre azul */
.login-formulario-contenedor .campo label {
    color: rgba(255,255,255,0.8);
}

.login-formulario-contenedor .campo input {
    background: #ffffff;
    border-color: #d1d5db;
    color: #000000;
}

.login-formulario-contenedor .campo input::placeholder {
    color: #9ca3af;
}

.login-formulario-contenedor .campo input:focus {
    border-color: #ffffff;
    background: #ffffff;
}

.login-boton {
    display: inline-block;
    padding: 12px 32px;
    font-size: 0.92rem;
    font-weight: 700;
    background: #ffffff;
    color: #13448C;
    border: none;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.3px;
    transition: background 0.2s;
    margin-top: 8px;
}

.login-boton:hover {
    background: #e5e7eb;
}

.login-boton-flecha {
    display: inline-block;
    margin-left: 6px;
    transition: transform 0.3s;
}

.login-boton:hover .login-boton-flecha {
    animation: moverFlecha 0.8s ease-in-out infinite;
}

@keyframes moverFlecha {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

.login-pie {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.15);
    text-align: center;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
}

.login-pie a {
    color: rgba(255,255,255,0.5);
}

.login-pie a:hover {
    color: #ffffff;
    text-decoration: none;
}

/* Alerta sobre fondo azul */
.login-formulario-contenedor .alerta-error {
    background: rgba(220,38,38,0.2);
    color: #fecaca;
}

/* Login responsive */
@media (max-width: 768px) {
    .login-pagina {
        flex-direction: column;
    }

    .login-panel-izquierdo {
        padding: 40px 20px 24px;
        flex: none;
    }

    .login-logo-grande {
        max-width: 260px;
        margin-bottom: 20px;
    }

    .login-titulo {
        font-size: 0.95rem;
        white-space: normal;
    }

    .login-panel-derecho {
        padding: 30px 20px 40px;
        flex: 1;
    }

    .login-efecto-circulo {
        display: none;
    }
}


/* --------------------------------------------------------
   FORMULARIOS
   -------------------------------------------------------- */
.campo {
    margin-bottom: 18px;
}

.campo label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #3E4B64;
    margin-bottom: 6px;
}

.campo input[type="text"],
.campo input[type="password"],
.campo input[type="email"],
.campo input[type="url"],
.campo input[type="tel"],
.campo input[type="number"],
.campo select,
.campo textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    font-size: 0.92rem;
    color: #000000;
    font-family: inherit;
    transition: border-color 0.2s;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: #13448C;
}

.campo textarea {
    resize: vertical;
    min-height: 100px;
}

.campo-archivo {
    margin-bottom: 18px;
}

.campo-archivo label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #3E4B64;
    margin-bottom: 6px;
}

.campo-archivo input[type="file"] {
    font-size: 0.88rem;
    color: #3E4B64;
}


/* --------------------------------------------------------
   BOTONES
   -------------------------------------------------------- */
.boton {
    display: inline-block;
    padding: 10px 24px;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s, opacity 0.2s;
    text-align: center;
}

.boton:hover {
    opacity: 0.9;
    text-decoration: none;
}

.boton-primario {
    background: #13448C;
    color: #ffffff;
}

.boton-secundario {
    background: #e5e7eb;
    color: #3E4B64;
}

.boton-peligro {
    background: #991b1b;
    color: #ffffff;
}

.boton-exito {
    background: #065f46;
    color: #ffffff;
}

.boton-completo {
    width: 100%;
}

.boton-pequeno {
    padding: 6px 14px;
    font-size: 0.82rem;
}


/* --------------------------------------------------------
   TABLAS
   -------------------------------------------------------- */
.tabla-contenedor {
    background: #ffffff;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    overflow-x: auto;
}

.tabla {
    width: 100%;
    font-size: 0.9rem;
}

.tabla thead {
    background: #f7f8fa;
}

.tabla th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: #3E4B64;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 2px solid #e5e7eb;
}

.tabla td {
    padding: 12px 16px;
    border-bottom: 1px solid #f2f3f5;
    vertical-align: middle;
}

.tabla tbody tr:hover {
    background: #f7f8fa;
}

.fila-clickable {
    cursor: pointer;
}

.fila-clickable:hover td {
    background: #edf2fa;
}

.tabla-vacia {
    text-align: center;
    padding: 40px 16px;
    color: #3E4B64;
    font-size: 0.92rem;
}


/* --------------------------------------------------------
   TARJETAS Y PANELES
   -------------------------------------------------------- */
.tarjeta {
    background: #ffffff;
    padding: 24px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    margin-bottom: 20px;
}

.tarjeta-titulo {
    font-size: 1.05rem;
    font-weight: 700;
    color: #13448C;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.estadisticas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.estadistica-caja {
    background: #ffffff;
    padding: 20px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    text-align: center;
}

.estadistica-numero {
    font-size: 2rem;
    font-weight: 700;
    color: #13448C;
}

.estadistica-texto {
    font-size: 0.82rem;
    color: #3E4B64;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}


/* --------------------------------------------------------
   ESTADOS DE TICKETS
   -------------------------------------------------------- */
.estado {
    display: inline-block;
    padding: 4px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.estado-recibido {
    background: #e5e7eb;
    color: #3E4B64;
}

.estado-leido {
    background: #d6e4f7;
    color: #13448C;
}

.estado-en_proceso {
    background: #fef3c7;
    color: #92400e;
}

.estado-realizado {
    background: #d1fae5;
    color: #065f46;
}

.estado-cerrado {
    background: #e5e7eb;
    color: #000000;
}


/* --------------------------------------------------------
   PRIORIDADES
   -------------------------------------------------------- */
.prioridad {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.78rem;
    font-weight: 600;
}

.prioridad-baja {
    background: #e5e7eb;
    color: #3E4B64;
}

.prioridad-media {
    background: #d6e4f7;
    color: #13448C;
}

.prioridad-alta {
    background: #fed7aa;
    color: #c2410c;
}

.prioridad-urgente {
    background: #fecaca;
    color: #991b1b;
}


/* --------------------------------------------------------
   DETALLE DE TICKET
   -------------------------------------------------------- */
.ticket-detalle {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
}

.ticket-info {
    background: #ffffff;
    padding: 24px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

.ticket-lateral {
    background: #ffffff;
    padding: 24px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    align-self: start;
}

.ticket-campo {
    margin-bottom: 16px;
}

.ticket-campo dt {
    font-size: 0.78rem;
    font-weight: 600;
    color: #3E4B64;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.ticket-campo dd {
    font-size: 0.92rem;
    color: #000000;
}


/* --------------------------------------------------------
   COMENTARIOS
   -------------------------------------------------------- */
.comentarios {
    margin-top: 24px;
}

.comentario {
    padding: 16px;
    margin-bottom: 12px;
    background: #f7f8fa;
}

.comentario-admin {
    background: #edf2fa;
}

.comentario-cabecera {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.82rem;
}

.comentario-autor {
    font-weight: 700;
    color: #13448C;
}

.comentario-fecha {
    color: #3E4B64;
}

.comentario-texto {
    font-size: 0.92rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

.comentario-acciones {
    margin-top: 10px;
    display: flex;
    gap: 6px;
}


/* --------------------------------------------------------
   ARCHIVOS ADJUNTOS
   -------------------------------------------------------- */
.archivos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.archivo-item {
    background: #f7f8fa;
    padding: 12px;
    text-align: center;
}

.archivo-item img {
    max-height: 150px;
    object-fit: contain;
    margin-bottom: 8px;
    cursor: pointer;
}

.archivo-item video,
.archivo-item audio {
    width: 100%;
    margin-bottom: 8px;
}

.archivo-nombre {
    font-size: 0.78rem;
    color: #3E4B64;
    word-break: break-all;
}

.archivo-tamano {
    font-size: 0.72rem;
    color: #3E4B64;
}


/* --------------------------------------------------------
   MENSAJES DE ALERTA
   -------------------------------------------------------- */
.alerta {
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.alerta-exito {
    background: #d1fae5;
    color: #065f46;
}

.alerta-error {
    background: #fecaca;
    color: #991b1b;
}

.alerta-info {
    background: #d6e4f7;
    color: #13448C;
}


/* --------------------------------------------------------
   NAVEGACIÓN Y PESTAÑAS
   -------------------------------------------------------- */
.nav-pestanas {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid #e5e7eb;
}

.nav-pestana {
    padding: 10px 20px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #3E4B64;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}

.nav-pestana:hover {
    color: #13448C;
    text-decoration: none;
}

.nav-pestana.activa {
    color: #13448C;
    border-bottom-color: #13448C;
}

.pestana-contador {
    display: inline-block;
    background: #e5e7eb;
    color: #3E4B64;
    font-size: 0.72rem;
    font-weight: 700;
    min-width: 22px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 10px;
    padding: 0 6px;
    margin-left: 6px;
}

.nav-pestana.activa .pestana-contador {
    background: #13448C;
    color: #ffffff;
}


/* --------------------------------------------------------
   BARRA DE ACCIONES
   -------------------------------------------------------- */
.barra-acciones {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.barra-acciones h2 {
    font-size: 1.2rem;
    color: #13448C;
    font-weight: 700;
}


/* --------------------------------------------------------
   FILTROS
   -------------------------------------------------------- */
.filtros {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filtros select {
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    font-size: 0.85rem;
    font-family: inherit;
    color: #3E4B64;
    background: #ffffff;
}

.filtros select:focus {
    outline: none;
    border-color: #13448C;
}


/* --------------------------------------------------------
   MODAL IMAGEN AMPLIADA
   -------------------------------------------------------- */
.modal-fondo {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.modal-fondo.visible {
    display: flex;
}

.modal-fondo img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}


/* --------------------------------------------------------
   INDICADOR SLA
   -------------------------------------------------------- */
.sla {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.78rem;
    font-weight: 600;
}

.sla-ok {
    background: #d1fae5;
    color: #065f46;
}

.sla-aviso {
    background: #fef3c7;
    color: #92400e;
}

.sla-alerta {
    background: #fecaca;
    color: #991b1b;
}


/* --------------------------------------------------------
   NOTAS INTERNAS
   -------------------------------------------------------- */
.comentario-privado {
    background: #fefce8;
    border: 1px dashed #d97706;
}

.nota-interna-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    background: #fef3c7;
    color: #92400e;
    margin-left: 6px;
    vertical-align: middle;
}


/* --------------------------------------------------------
   NOTIFICACIONES
   -------------------------------------------------------- */
.notificacion-contenedor {
    position: relative;
    display: inline-block;
    margin-left: 8px;
}

.notificacion-boton {
    background: rgba(255,255,255,0.12);
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 6px 10px;
    font-size: 1rem;
    position: relative;
    font-family: inherit;
    transition: background 0.2s;
}

.notificacion-boton:hover {
    background: rgba(255,255,255,0.25);
}

.notificacion-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #dc2626;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    padding: 0 5px;
}

.notificacion-panel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 360px;
    max-height: 480px;
    overflow-y: auto;
    background: #ffffff;
    color: #000000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    z-index: 999;
}

.notificacion-panel.visible {
    display: block;
}

.notificacion-panel-titulo {
    padding: 14px 18px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #3E4B64;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: #f7f8fa;
    border-bottom: 1px solid #e5e7eb;
}

.notificacion-vacia {
    padding: 30px 18px;
    text-align: center;
    color: #3E4B64;
    font-size: 0.9rem;
}

.notificacion-panel a.notificacion-item {
    display: block;
    padding: 14px 18px;
    border-bottom: 1px solid #f2f3f5;
    text-decoration: none;
    color: #000000;
    transition: background 0.15s;
}

.notificacion-panel a.notificacion-item:hover {
    background: #f7f8fa;
    text-decoration: none;
    color: #000000;
}

.notificacion-panel a.notificacion-item .notificacion-mensaje {
    color: #000000;
}

.notificacion-panel a.notificacion-item .notificacion-fecha {
    color: #3E4B64;
}

.notificacion-item.sin-leer {
    background: #edf2fa;
}

.notificacion-item.sin-leer:hover {
    background: #d6e4f7;
}

.notificacion-mensaje {
    font-size: 0.88rem;
    line-height: 1.4;
    margin-bottom: 4px;
}

.notificacion-fecha {
    font-size: 0.75rem;
    color: #3E4B64;
}

.notificacion-marcar-leidas {
    width: 100%;
    padding: 12px;
    background: #ffffff;
    border: none;
    color: #13448C;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.notificacion-marcar-leidas:hover {
    background: #f7f8fa;
}

@media (max-width: 768px) {
    .notificacion-panel {
        width: 280px;
        right: -50px;
    }
}


/* --------------------------------------------------------
   BÚSQUEDA
   -------------------------------------------------------- */
.busqueda-input {
    flex: 1;
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    font-size: 0.85rem;
    font-family: inherit;
    color: #000000;
    background: #ffffff;
}

.busqueda-input:focus {
    outline: none;
    border-color: #13448C;
}


/* --------------------------------------------------------
   ARTÍCULOS DE AYUDA
   -------------------------------------------------------- */
.ayuda-articulo {
    padding: 14px 0;
    border-bottom: 1px solid #f2f3f5;
}

.ayuda-articulo:last-child {
    border-bottom: none;
}

.ayuda-articulo a {
    font-weight: 600;
    font-size: 0.95rem;
}

.ayuda-articulo p {
    margin-top: 4px;
}

/* Layout artículo con sidebar */
.ayuda-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    align-items: start;
}

/* Sidebar */
.ayuda-sidebar {
    position: sticky;
    top: 20px;
}

.ayuda-sidebar-seccion {
    background: #ffffff;
    padding: 20px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    margin-bottom: 16px;
}

.ayuda-sidebar-titulo {
    font-size: 0.78rem;
    font-weight: 700;
    color: #3E4B64;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 12px;
}

.ayuda-indice-enlace {
    display: block;
    padding: 6px 0;
    font-size: 0.85rem;
    color: #3E4B64;
    border-bottom: 1px solid #f2f3f5;
}

.ayuda-indice-enlace:hover {
    color: #13448C;
    text-decoration: none;
}

.ayuda-indice-sub {
    padding-left: 14px;
    font-size: 0.8rem;
}

.ayuda-sidebar-enlace {
    display: block;
    padding: 8px 0;
    font-size: 0.85rem;
    color: #3E4B64;
    border-bottom: 1px solid #f2f3f5;
}

.ayuda-sidebar-enlace:hover {
    color: #13448C;
    text-decoration: none;
}

.ayuda-sidebar-enlace.activo {
    color: #13448C;
    font-weight: 700;
}

/* Contenido markdown renderizado */
.ayuda-titulo-articulo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e5e7eb;
}

.ayuda-markdown {
    font-size: 1rem;
    line-height: 1.8;
    color: #000000;
}

.ayuda-markdown h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #13448C;
    margin: 32px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.ayuda-markdown h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #3E4B64;
    margin: 24px 0 8px;
}

.ayuda-markdown p {
    margin: 0 0 14px;
}

.ayuda-markdown ul,
.ayuda-markdown ol {
    margin: 0 0 14px;
    padding-left: 24px;
}

.ayuda-markdown li {
    margin-bottom: 6px;
}

.ayuda-markdown code {
    background: #f2f3f5;
    padding: 2px 6px;
    font-size: 0.88rem;
    font-family: monospace;
}

.ayuda-markdown pre {
    background: #f2f3f5;
    padding: 16px;
    overflow-x: auto;
    margin: 0 0 14px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.ayuda-markdown pre code {
    background: none;
    padding: 0;
}

.ayuda-markdown table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 14px;
    font-size: 0.92rem;
}

.ayuda-markdown th,
.ayuda-markdown td {
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    text-align: left;
}

.ayuda-markdown th {
    background: #f7f8fa;
    font-weight: 600;
    color: #3E4B64;
}

.ayuda-markdown blockquote {
    margin: 0 0 14px;
    padding: 12px 20px;
    background: #f7f8fa;
    border-left: 3px solid #13448C;
    color: #3E4B64;
}

.ayuda-markdown img {
    max-width: 100%;
    margin: 8px 0;
}

.ayuda-markdown strong {
    color: #000000;
}

/* --------------------------------------------------------
   REQUIERE RESPUESTA / PENDIENTE CLIENTE
   -------------------------------------------------------- */
.comentario-requiere {
    background: #fff7ed;
    border: 1px solid #f59e0b;
}

.requiere-respuesta-aviso {
    font-size: 0.8rem;
    font-weight: 700;
    color: #92400e;
    background: #fef3c7;
    padding: 6px 12px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.banner-pendiente {
    background: #fef3c7;
    padding: 20px 24px;
    margin-bottom: 20px;
    border: 1px solid #f59e0b;
}

.banner-pendiente strong {
    font-size: 1.05rem;
    color: #92400e;
    display: block;
    margin-bottom: 6px;
}

.banner-pendiente p {
    font-size: 0.92rem;
    color: #78350f;
    margin: 0;
}

.estado-pendiente-cliente {
    display: inline-block;
    padding: 3px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #92400e;
    background: #fef3c7;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 4px;
    white-space: nowrap;
}

.fila-pendiente td {
    background: #fef2f2;
}

.fila-pendiente-aviso {
    background: #b91c1c !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    padding: 0 16px !important;
    border: none;
    line-height: 18px;
    height: 18px;
}


/* Resaltado de búsqueda */
.ayuda-resaltado {
    background: #fef3c7;
    padding: 1px 3px;
}


/* --------------------------------------------------------
   DOCUMENTACIÓN PROFESIONAL (vista previa + cliente)
   -------------------------------------------------------- */

/* Breadcrumb */
.ayuda-breadcrumb {
    font-size: 0.85rem;
    color: #3E4B64;
    margin-bottom: 24px;
}

.ayuda-breadcrumb-sep {
    margin: 0 8px;
    color: #d1d5db;
}

/* Cabecera del documento */
.ayuda-doc-cabecera {
    margin-bottom: 28px;
}

.ayuda-doc-cabecera h1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #000000;
    line-height: 1.3;
    margin-bottom: 8px;
}

.ayuda-doc-meta {
    font-size: 0.82rem;
    color: #3E4B64;
}

/* Índice de contenidos (dentro del doc) */
.ayuda-doc-indice {
    background: #f7f8fa;
    padding: 20px 24px;
    margin-bottom: 32px;
}

.ayuda-doc-indice-titulo {
    font-size: 0.82rem;
    font-weight: 700;
    color: #3E4B64;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 10px;
}

.ayuda-doc-indice ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ayuda-doc-indice li {
    margin-bottom: 0;
}

.ayuda-doc-indice li a {
    display: block;
    padding: 6px 0;
    font-size: 0.9rem;
    color: #13448C;
    border-bottom: 1px solid #ecedf0;
}

.ayuda-doc-indice li a:hover {
    color: #0f3670;
    text-decoration: none;
}

.ayuda-doc-indice-sub {
    padding-left: 18px;
}

.ayuda-doc-indice-sub a {
    font-size: 0.85rem;
    color: #3E4B64;
}

/* Cuerpo del documento renderizado */
.ayuda-doc-cuerpo {
    background: #ffffff;
    padding: 36px 40px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    font-size: 1rem;
    line-height: 1.9;
    color: #1a1a1a;
}

.ayuda-doc-cuerpo h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #13448C;
    margin: 40px 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid #ecedf0;
}

.ayuda-doc-cuerpo h2:first-child {
    margin-top: 0;
}

.ayuda-doc-cuerpo h3 {
    font-size: 1.12rem;
    font-weight: 700;
    color: #3E4B64;
    margin: 28px 0 10px;
}

.ayuda-doc-cuerpo h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #000000;
    margin: 20px 0 8px;
}

.ayuda-doc-cuerpo p {
    margin: 0 0 16px;
}

.ayuda-doc-cuerpo ul,
.ayuda-doc-cuerpo ol {
    margin: 0 0 16px;
    padding-left: 26px;
}

.ayuda-doc-cuerpo li {
    margin-bottom: 8px;
}

.ayuda-doc-cuerpo li > ul,
.ayuda-doc-cuerpo li > ol {
    margin-top: 8px;
    margin-bottom: 0;
}

.ayuda-doc-cuerpo code {
    background: #f2f3f5;
    padding: 3px 8px;
    font-size: 0.88rem;
    font-family: 'Consolas', 'Monaco', monospace;
    color: #c2410c;
}

.ayuda-doc-cuerpo pre {
    background: #1a1a2e;
    color: #e5e7eb;
    padding: 20px 24px;
    overflow-x: auto;
    margin: 0 0 16px;
    font-size: 0.85rem;
    line-height: 1.6;
}

.ayuda-doc-cuerpo pre code {
    background: none;
    padding: 0;
    color: inherit;
}

.ayuda-doc-cuerpo table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px;
    font-size: 0.92rem;
}

.ayuda-doc-cuerpo th,
.ayuda-doc-cuerpo td {
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    text-align: left;
}

.ayuda-doc-cuerpo th {
    background: #f7f8fa;
    font-weight: 700;
    color: #3E4B64;
}

.ayuda-doc-cuerpo tr:nth-child(even) td {
    background: #fafbfc;
}

.ayuda-doc-cuerpo blockquote {
    margin: 0 0 16px;
    padding: 16px 24px;
    background: #f7f8fa;
    color: #3E4B64;
    font-style: italic;
}

.ayuda-doc-cuerpo blockquote p:last-child {
    margin-bottom: 0;
}

.ayuda-doc-cuerpo hr {
    border: none;
    border-top: 2px solid #ecedf0;
    margin: 32px 0;
}

.ayuda-doc-cuerpo img {
    max-width: 100%;
    margin: 12px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.ayuda-doc-cuerpo strong {
    color: #000000;
    font-weight: 700;
}

.ayuda-doc-cuerpo a {
    color: #13448C;
    text-decoration: underline;
}

/* Buscador del documento */
.ayuda-doc-buscador {
    margin-bottom: 20px;
}


/* --------------------------------------------------------
   ACORDEÓN DE SECCIONES
   -------------------------------------------------------- */
.ac-sec {
    margin-bottom: 2px;
}

.ac-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: #ffffff;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    user-select: none;
}

.ac-head:hover {
    background: #f7f8fa;
}

.ac-head-activo {
    background: #f7f8fa;
}

.ac-txt {
    font-size: 1.1rem;
    font-weight: 700;
    color: #13448C;
}

.ac-arr {
    font-size: 0.8rem;
    color: #3E4B64;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.ac-body {
    display: none;
}


/* Pie del documento */
.ayuda-doc-pie {
    background: #f7f8fa;
    padding: 24px;
    margin-top: 32px;
    text-align: center;
    font-size: 0.92rem;
    color: #3E4B64;
}


/* Responsive ayuda */
@media (max-width: 768px) {
    .ayuda-layout {
        grid-template-columns: 1fr;
    }

    .ayuda-sidebar {
        position: static;
        order: 2;
    }

    .ayuda-contenido {
        order: 1;
    }

    .ayuda-titulo-articulo {
        font-size: 1.2rem;
    }

    .ayuda-doc-cabecera h1 {
        font-size: 1.3rem;
    }

    .ayuda-doc-cuerpo {
        padding: 20px 16px;
    }

    .ayuda-doc-indice {
        padding: 16px;
    }
}


/* --------------------------------------------------------
   INTERFAZ CLIENTE SIMPLIFICADA
   -------------------------------------------------------- */

/* Botón principal gigante para "Nuevo ticket" */
.boton-accion-principal {
    display: block;
    width: 100%;
    padding: 28px 30px;
    font-size: 1.3rem;
    font-weight: 700;
    background: #13448C;
    color: #ffffff;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    margin-bottom: 28px;
    transition: background 0.2s;
    position: relative;
}

.boton-accion-principal:hover {
    background: #0f3670;
    text-decoration: none;
}

.boton-accion-principal .boton-flecha {
    display: inline-block;
    margin-left: 12px;
    font-size: 1.4rem;
    vertical-align: middle;
    animation: pulsar 1.5s ease-in-out infinite;
}

@keyframes pulsar {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(8px); opacity: 0.7; }
}

/* Tarjetas de acción rápida para cliente */
.acciones-rapidas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 28px;
}

.accion-rapida {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    padding: 22px 24px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    text-decoration: none;
    color: #000000;
    transition: box-shadow 0.2s;
}

.accion-rapida:hover {
    box-shadow: 0 3px 14px rgba(0,0,0,0.12);
    text-decoration: none;
}

.accion-icono {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: #edf2fa;
    color: #13448C;
    border-radius: 50%;
}

.accion-texto {
    flex: 1;
}

.accion-texto strong {
    display: block;
    font-size: 1.05rem;
    margin-bottom: 2px;
}

.accion-texto span {
    font-size: 0.82rem;
    color: #3E4B64;
}

/* Indicador visual de "pulsa aquí" */
.indicador-pulsar {
    display: inline-block;
    font-size: 1.1rem;
    color: #13448C;
    animation: rebote 1s ease-in-out infinite;
    margin-left: 8px;
}

@keyframes rebote {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Tabla cliente simplificada - filas más grandes */
.tabla-simple td {
    padding: 16px;
    font-size: 0.95rem;
}

.tabla-simple th {
    padding: 14px 16px;
}

.tabla-simple .boton-ver-ticket {
    padding: 10px 22px;
    font-size: 0.9rem;
    font-weight: 600;
    background: #13448C;
    color: #ffffff;
}

.tabla-simple .boton-ver-ticket:hover {
    background: #0f3670;
}

/* KPIs cliente clickables */
.kpis-cliente {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}

.kpi-cliente {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    background: #ffffff;
    padding: 18px 22px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    text-decoration: none;
    color: #000000;
    transition: box-shadow 0.2s, transform 0.15s;
    border-bottom: 3px solid transparent;
}

.kpi-cliente:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    text-decoration: none;
    transform: translateY(-2px);
}

.kpi-cliente.kpi-activo {
    border-bottom-color: #13448C;
    background: #f7f8fa;
}

.kpi-numero {
    font-size: 1.8rem;
    font-weight: 700;
    color: #13448C;
    line-height: 1;
    flex-shrink: 0;
}

.kpi-texto {
    font-size: 0.88rem;
    color: #3E4B64;
    font-weight: 600;
}

@media (max-width: 768px) {
    .kpis-cliente {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* Cabecera cliente simplificada */
.cabecera-cliente {
    background: #13448C;
    color: #ffffff;
    padding: 14px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cabecera-cliente-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cabecera-cliente-nav a {
    color: #ffffff;
    padding: 8px 16px;
    font-size: 0.92rem;
    font-weight: 600;
    background: rgba(255,255,255,0.12);
    transition: background 0.2s;
    text-decoration: none;
}

.cabecera-cliente-nav a:hover {
    background: rgba(255,255,255,0.25);
    text-decoration: none;
}

.cabecera-cliente-nav .nav-activo {
    background: rgba(255,255,255,0.25);
}

.cabecera-usuario {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.7);
}

/* Sección de título con explicación */
.seccion-titulo {
    margin-bottom: 20px;
}

.seccion-titulo h2 {
    font-size: 1.3rem;
    color: #13448C;
    font-weight: 700;
    margin-bottom: 4px;
}

.seccion-titulo p {
    font-size: 0.9rem;
    color: #3E4B64;
}

/* Formulario cliente simplificado - campos más grandes */
.formulario-simple .campo label {
    font-size: 0.95rem;
    margin-bottom: 8px;
    color: #000000;
}

.formulario-simple .campo input,
.formulario-simple .campo select,
.formulario-simple .campo textarea {
    padding: 14px 16px;
    font-size: 1rem;
}

.formulario-simple .campo-ayuda {
    font-size: 0.82rem;
    color: #3E4B64;
    margin-top: 4px;
}

/* Botón enviar grande en formularios */
.boton-enviar-grande {
    display: block;
    width: 100%;
    padding: 18px 30px;
    font-size: 1.15rem;
    font-weight: 700;
    background: #13448C;
    color: #ffffff;
    border: none;
    cursor: pointer;
    font-family: inherit;
    margin-top: 10px;
    transition: background 0.2s;
}

.boton-enviar-grande:hover {
    background: #0f3670;
}

.boton-enviar-grande .boton-flecha {
    display: inline-block;
    margin-left: 10px;
    animation: pulsar 1.5s ease-in-out infinite;
}

/* Estado del ticket grande y claro */
.estado-grande {
    display: inline-block;
    padding: 8px 18px;
    font-size: 0.92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}


/* --------------------------------------------------------
   BOTÓN CAPTURA DE PANTALLA
   -------------------------------------------------------- */
.boton-captura {
    display: inline-block;
    padding: 16px 32px;
    font-size: 1.1rem;
    font-weight: 700;
    background: #13448C;
    color: #ffffff;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}

.boton-captura:hover {
    background: #0f3670;
}


/* --------------------------------------------------------
   UTILIDADES
   -------------------------------------------------------- */
.texto-derecha {
    text-align: right;
}

.texto-centro {
    text-align: center;
}

.texto-gris {
    color: #3E4B64;
}

.texto-pequeno {
    font-size: 0.82rem;
}

.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mt-20 { margin-top: 20px; }
.mt-10 { margin-top: 10px; }


/* --------------------------------------------------------
   RESPONSIVE - TABLET (hasta 1024px)
   -------------------------------------------------------- */
@media (max-width: 1024px) {
    .contenedor {
        padding: 20px 16px;
    }

    .ticket-detalle {
        grid-template-columns: 1fr;
    }

    .cabecera,
    .cabecera-cliente {
        padding: 12px 16px;
    }

    .cabecera-logo {
        width: 200px;
    }

    .cabecera-derecha {
        gap: 12px;
        font-size: 0.82rem;
    }

    /* Login en tablet */
    .login-logo-grande {
        max-width: 320px;
    }
}


/* --------------------------------------------------------
   RESPONSIVE - MÓVIL (hasta 768px)
   -------------------------------------------------------- */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }

    /* Cabecera admin */
    .cabecera {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        padding: 12px 16px;
    }

    .cabecera-logo {
        width: 180px;
    }

    .cabecera-derecha {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        font-size: 0.8rem;
    }

    /* Cabecera cliente */
    .cabecera-cliente {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        padding: 12px 16px;
    }

    .cabecera-cliente-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }

    .cabecera-cliente-nav a {
        padding: 8px 12px;
        font-size: 0.82rem;
    }

    .cabecera-usuario {
        font-size: 0.8rem;
    }

    /* Login pantalla dividida -> apilada */
    .login-pagina {
        flex-direction: column;
    }

    .login-panel-izquierdo {
        padding: 30px 20px 20px;
        flex: none;
    }

    .login-logo-grande {
        max-width: 240px;
        margin-bottom: 16px;
    }

    .login-titulo {
        font-size: 0.9rem;
        white-space: normal;
    }

    .login-subtitulo {
        font-size: 0.82rem;
        margin-bottom: 0;
    }

    .login-panel-derecho {
        padding: 24px 20px 30px;
        flex: 1;
    }

    .login-efecto-circulo {
        display: none;
    }

    .login-formulario-contenedor {
        max-width: 100%;
    }

    .login-formulario-contenedor .campo label {
        font-size: 0.88rem;
    }

    /* Contenedor general */
    .contenedor {
        padding: 16px 12px;
    }

    /* Estadísticas */
    .estadisticas {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .estadisticas-cliente {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .estadistica-caja,
    .estadistica-cliente {
        padding: 16px 12px;
    }

    .estadistica-numero,
    .estadistica-cliente .numero {
        font-size: 1.8rem;
    }

    /* Acciones rápidas */
    .acciones-rapidas {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .accion-rapida {
        padding: 16px;
    }

    /* Botón principal */
    .boton-accion-principal {
        font-size: 1rem;
        padding: 20px 16px;
    }

    /* Tablas - scroll horizontal */
    .tabla-contenedor {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tabla {
        min-width: 600px;
    }

    .tabla th,
    .tabla td {
        padding: 10px 12px;
        font-size: 0.82rem;
    }

    .tabla-simple td {
        padding: 12px;
        font-size: 0.88rem;
    }

    /* Tarjetas */
    .tarjeta {
        padding: 16px;
    }

    .tarjeta-titulo {
        font-size: 0.95rem;
    }

    /* Ticket detalle */
    .ticket-detalle {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ticket-info,
    .ticket-lateral {
        padding: 16px;
    }

    /* Formularios grid de 2 columnas -> 1 columna */
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns:1fr 1fr"] {
        display: block !important;
    }

    /* Filtros */
    .filtros {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .filtros select,
    .busqueda-input {
        width: 100%;
    }

    /* Barra acciones */
    .barra-acciones {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .barra-acciones h2 {
        font-size: 1.05rem;
    }

    /* Archivos adjuntos */
    .archivos-grid {
        grid-template-columns: 1fr;
    }

    /* Comentarios */
    .comentario {
        padding: 12px;
    }

    .comentario-cabecera {
        flex-direction: column;
        gap: 4px;
    }

    /* Navegación pestañas */
    .nav-pestanas {
        flex-wrap: wrap;
    }

    .nav-pestana {
        padding: 8px 14px;
        font-size: 0.82rem;
    }

    /* Botones */
    .boton {
        padding: 10px 18px;
        font-size: 0.85rem;
    }

    .boton-enviar-grande {
        font-size: 1rem;
        padding: 16px 20px;
    }

    .boton-captura {
        width: 100%;
        text-align: center;
        padding: 14px 20px;
        font-size: 1rem;
    }

    /* Sección título */
    .seccion-titulo h2 {
        font-size: 1.1rem;
    }

    /* Gráficas admin - apilar */
    div[style*="grid-template-columns: 2fr 1fr"] {
        display: block !important;
    }

    div[style*="grid-template-columns: 2fr 1fr"] > .tarjeta {
        margin-bottom: 12px;
    }

    /* Estado grande en móvil */
    .estado-grande {
        padding: 6px 14px;
        font-size: 0.82rem;
    }
}


/* --------------------------------------------------------
   RESPONSIVE - MÓVIL PEQUEÑO (hasta 400px)
   -------------------------------------------------------- */
@media (max-width: 400px) {
    .cabecera-logo {
        width: 150px;
    }

    .login-logo-grande {
        max-width: 180px;
    }

    .boton-accion-principal {
        font-size: 0.92rem;
        padding: 18px 12px;
    }

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

    .cabecera-derecha a,
    .cabecera-cliente-nav a {
        padding: 6px 10px;
        font-size: 0.78rem;
    }
}