/* ============================================================
   CSS/global.css
   Estilos globales del sistema
   Respeta los colores dinámicos definidos desde header.view.php
   ============================================================ */

:root {
    --color-primary: #2563eb;
    --color-primary-light: #e8edfe;
    --color-primary-dark: #1d4ed8;
    --color-secondary: #6b7280;
    --color-success: #28a745;
    --color-danger: #dc2626;
    --color-warning: #ffc107;
    --color-info: #17a2b8;

    --color-bg: #f4f5f7;
    --color-card: #ffffff;
    --color-text: #111827;
    --color-muted: #6b7280;
    --color-border: #e5e7eb;

    --sidebar-bg: #ffffff;
    --sidebar-text: #202124;
    --header-bg: #ffffff;
    --body-bg: #f8f9fa;

    --logo-icon-color: #4fc3f7;
    --logo-text-color: #1a1a2e;

    --radius: 10px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: var(--body-bg, var(--color-bg));
    color: var(--color-text);
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

/* Elemento localizado al navegar desde el Dashboard. */
.system-arrival-highlight{position:relative;z-index:2;animation:systemArrivalHighlight .58s ease-in-out 3;box-shadow:0 7px 18px rgba(15,23,42,.14)!important;outline:2px solid color-mix(in srgb,var(--color-primary,#4a6cf7) 24%,transparent);outline-offset:2px;will-change:transform}
tr.system-arrival-highlight>td{background:color-mix(in srgb,var(--color-primary,#4a6cf7) 7%,var(--card-bg,#fff))!important}
@keyframes systemArrivalHighlight{0%,100%{transform:translateX(0)}30%{transform:translateX(8px)}58%{transform:translateX(-4px)}78%{transform:translateX(3px)}}
body.modo-nocturno .system-arrival-highlight,[data-theme="dark"] .system-arrival-highlight{box-shadow:0 8px 20px rgba(0,0,0,.34)!important}
@media(prefers-reduced-motion:reduce){.system-arrival-highlight{animation:none!important}}

/* Mantiene la escala definida por el diseño y evita el acercamiento automático de iOS. */
html,body{touch-action:pan-x pan-y}
@media(max-width:768px){
 input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px!important}
}

/* ============================================================
   BOTONES
   IMPORTANTE: respetan los colores configurables
   ============================================================ */

.btn {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

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

.btn-primary {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

.btn-primary:hover {
    background: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

.btn-danger {
    background: var(--color-danger);
    color: #fff;
}

.btn-success {
    background: var(--color-success);
    color: #fff;
}

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

.btn-info {
    background: var(--color-info);
    color: #fff;
}

/* ============================================================
   CARDS
   ============================================================ */

.card {
    background: var(--color-card);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ============================================================
   FORMULARIOS
   ============================================================ */

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    color: var(--color-text);
}

/* ============================================================
   TABLAS
   ============================================================ */

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

.table th,
.table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
}

/* ============================================================
   BADGES
   ============================================================ */

.badge {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
}

.badge-activo {
    background: #dcfce7;
    color: #166534;
}

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

/* ============================================================
   SWITCH PEQUEÑO
   ============================================================ */

.switch-sm {
    width: 36px !important;
    height: 20px !important;
}

.switch-sm .slider::before {
    height: 14px !important;
    width: 14px !important;
    left: 3px !important;
    bottom: 3px !important;
}

.switch-sm input:checked + .slider::before {
    transform: translateX(16px) !important;
}

/* ============================================================
   DIRECCIONES - MODO CLARO
   ============================================================ */

.direccion-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 16px;
    position: relative;
    transition: all 0.3s ease;
    word-break: break-word;
    overflow-wrap: break-word;
    color: #495057;
}

.direccion-card-titulo {
    font-weight: 600;
    color: #2c3e50;
    font-size: 15px;
    margin-bottom: 4px;
    word-break: break-word;
}

.direccion-card-titulo i {
    color: var(--logo-icon-color, #4fc3f7);
    margin-right: 6px;
}

.direccion-card-info {
    font-size: 13px;
    color: #495057;
    line-height: 1.6;
}

.direccion-card-info > div {
    word-break: break-word;
}

.direccion-card-info i {
    width: 18px;
    color: #6c757d;
    flex-shrink: 0;
}

.direccion-card-referencia {
    font-size: 12px;
    color: #6c757d;
    margin-top: 4px;
    border-top: 1px solid #e9ecef;
    padding-top: 4px;
}

.direccion-card-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Se conservan los colores originales de estos botones */
.btn-principal {
    padding: 4px 12px;
    font-size: 12px;
    background: #e9ecef;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #495057;
}

.btn-editar-direccion {
    padding: 4px 12px;
    font-size: 12px;
    background: var(--color-info, #17a2b8);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
}

.btn-eliminar-direccion {
    padding: 4px 12px;
    font-size: 12px;
    background: var(--color-danger, #dc3545);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
}

/* ============================================================
   DIRECCIONES - ELEMENTOS AUXILIARES MODO CLARO
   ============================================================ */

.direcciones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.direccion-vacia {
    text-align: center;
    padding: 30px 20px;
    color: #6c757d;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px dashed #dee2e6;
}

.direccion-vacia > i {
    font-size: 32px;
    display: block;
    margin-bottom: 10px;
    color: #adb5bd;
}

.direccion-vacia p {
    margin: 0;
}

.direccion-vacia-subtexto {
    font-size: 13px;
    margin: 4px 0 0 0 !important;
}

.direccion-principal-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--color-warning, #f1c40f);
    color: #2c3e50;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
}

/* ============================================================
   SWEETALERT - BASE / MODO CLARO
   No se fuerza ningún color oscuro aquí.
   ============================================================ */

.swal2-popup {
    background: #ffffff;
    color: #1a1a2e;
}

.swal2-title {
    color: #1a1a2e;
}

.swal2-html-container {
    color: #495057;
}

/* ============================================================
   USUARIO CARDS - BASE / MODO CLARO
   ============================================================ */

.usuario-card {
    background: #ffffff;
    color: #212529;
}

.usuario-info h3 {
    color: #2c3e50;
}

.usuario-info p {
    color: #6c757d;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .card {
        padding: 16px;
    }
}

/* ============================================================
   NOTA SOBRE MODO NOCTURNO

   Los colores oscuros NO se definen aquí de forma global.
   header.view.php ya imprime dinámicamente el bloque nocturno
   únicamente cuando modo_nocturno_activo() es TRUE.

   De esta forma:
   - modo claro = estilos base de este archivo
   - modo oscuro = sobrescrituras dinámicas del header
   - colores configurables = variables CSS provenientes de config
   ============================================================ */
   /* ============================================================
   NOTIFICACIONES DE CAMPANA - MODO CLARO
   ============================================================ */

.notification-item {
    background: #ffffff;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.notification-item:hover {
    background: #f8f9fa;
}

/* No leída = amarillo suave */
.notification-item.unread {
    background: #fff8e6 !important;
    border-left: 3px solid var(--color-warning, #ffc107) !important;
}

.notification-item.unread:hover {
    background: #fff3cd !important;
}

.notification-item.read {
    background: #ffffff;
    border-left: 3px solid transparent;
}

.notification-item .noti-title {
    color: #1a1a2e;
}

.notification-item .noti-text {
    color: #495057;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.notification-item .noti-time {
    color: #6c757d;
}

.notification-item .noti-dot {
    background: var(--color-warning, #ffc107) !important;
}
/* ============================================================
   SWEETALERT - DETALLE DE NOTIFICACIÓN
   MODO CLARO
   ============================================================ */

.swal-notificacion-detalle {
    background: #ffffff !important;
    border-radius: 18px !important;
    border: 1px solid #e9ecef !important;
    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.20) !important;
}

.swal-notificacion-html {
    margin: 0 !important;
    padding: 0 !important;
}

.notificacion-detalle {
    width: 100%;
    text-align: center;
}


/* ICONO */

.notificacion-detalle-icono {
    width: 64px;
    height: 64px;

    margin:
        0 auto
        14px auto;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 28px;
}


/* TÍTULO */

.notificacion-detalle-titulo {
    margin:
        0 0
        12px 0;

    color: #1a1a2e;

    font-size: 21px;
    font-weight: 700;

    line-height: 1.3;

    word-break: break-word;
}


/* META */

.notificacion-detalle-meta {
    display: flex;

    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 18px;
}


/* TIPO */

.notificacion-detalle-tipo {
    padding: 4px 11px;

    border-radius: 20px;

    font-size: 11px;
    font-weight: 600;
}


/* ESTADO */

.notificacion-detalle-estado {
    padding: 4px 11px;

    border-radius: 20px;

    font-size: 11px;
    font-weight: 600;

    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.notificacion-detalle-estado.no-leida {
    background: #fff3cd;
    color: #856404;
}

.notificacion-detalle-estado.leida {
    background: #d4edda;
    color: #155724;
}


/* MENSAJE */
/* ============================================================
   MENSAJE DEL DETALLE DE NOTIFICACIÓN
   ============================================================ */

.notificacion-detalle-mensaje {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;

    padding: 14px 16px;

    margin-bottom: 18px;

    text-align: left;
}

.notificacion-detalle-mensaje-texto {
    color: #495057;

    font-size: 14px;

    line-height: 1.55;

    white-space: pre-wrap;

    word-break: break-word;

    margin: 0;

    padding: 0;
}

.notificacion-detalle-icono-inline {
    color: var(--color-primary, #4a6cf7);

    font-size: 13px;

    margin-right: 7px;
}
/* TEXTO */

/* ============================================================
   DETALLE NOTIFICACIÓN - MENSAJE
   ============================================================ */

.notificacion-detalle-mensaje {
    width: 100%;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 14px 0 18px 0;
    text-align: left;
    box-sizing: border-box;
}

.notificacion-detalle-mensaje-texto {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #495057;
    font-size: 14px;
    line-height: 1.55;
    text-align: left;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.notificacion-detalle-mensaje-texto span {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.notificacion-detalle-icono-inline {
    flex-shrink: 0;
    color: var(--color-primary, #4a6cf7);
    font-size: 13px;
    margin-top: 4px;
}

/* FOOTER */

.notificacion-detalle-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding-top: 14px;
    border-top: 1px solid #e9ecef;
    color: #6c757d;
    font-size: 11px;
}

.notificacion-detalle-footer span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 0;
}

.notificacion-detalle-footer i {
    color: var(--color-primary, #4a6cf7);
}

/* BOTÓN CERRAR */

.swal-notificacion-cerrar {
    border-radius: 8px !important;

    padding:
        9px 24px !important;

    font-weight: 600 !important;
}


/* X */

.swal-notificacion-detalle
.swal2-close {
    color: #adb5bd !important;
}

.swal-notificacion-detalle
.swal2-close:hover {
    color: #495057 !important;
}


/* RESPONSIVE */

@media (max-width: 600px) {

    .swal-notificacion-detalle {
        width:
            calc(
                100% - 24px
            ) !important;
    }

    .notificacion-detalle-footer {
        flex-direction: column;
        align-items: flex-start;
    }

}
.notificacion-evento-swal-icon i{font-size:.82em}
/* SweetAlert sigue el tema activo en todas las páginas autenticadas. */
body.modo-nocturno .swal2-popup{background:#161b22!important;color:#e6edf3!important;border:1px solid #30363d!important;box-shadow:0 22px 65px rgba(0,0,0,.55)!important}
body.modo-nocturno .swal2-title,body.modo-nocturno .swal2-html-container,body.modo-nocturno .swal2-input-label,body.modo-nocturno .swal2-validation-message{color:#e6edf3!important}
body.modo-nocturno .swal2-html-container{color:#aab6c5!important}
body.modo-nocturno .swal2-input,body.modo-nocturno .swal2-textarea,body.modo-nocturno .swal2-select{background:#0d1117!important;border-color:#484f58!important;color:#e6edf3!important;color-scheme:dark}
body.modo-nocturno .swal2-validation-message{background:#21262d!important}
body.modo-nocturno .swal2-close{color:#8b949e!important}
body.modo-nocturno .swal2-timer-progress-bar{background:var(--color-primary,#58a6ff)!important}
.swal2-popup,.swal2-popup input,.swal2-popup textarea,.swal2-popup select,.swal2-popup button{font-family:'Segoe UI',Arial,sans-serif!important}.swal2-popup{border-radius:18px!important}.swal2-input,.swal2-textarea,.swal2-select{border-radius:10px!important}.swal2-actions .swal2-styled{border-radius:9px!important}
/* Cierre unificado de modales */
.modal-close,
.cot-modal header>button[data-cot-close],
.cot-modal header>button[data-cot-detail-close],
.cot-modal header>button[data-template-close],
.cot-modal header>button[data-survey-close],
.cli-modal header>button[data-cli-close],
.inv-modal header>button[data-close],
.op-modal-head>button[data-cerrar-solicitud],
.op-modal-head>button[data-cerrar-catalogo],
.op-modal-head>button[data-cerrar-detalle],
.op-modal-head>button[data-cerrar-accion],
.op-modal-head>button[data-cerrar-archivo],
#cerrar-modal-direccion{
 display:inline-grid!important;place-items:center!important;flex:0 0 36px!important;
 width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;
 margin:0!important;padding:0!important;border:1px solid color-mix(in srgb,var(--color-primary,var(--primary-color,#173b67)) 82%,#000 8%)!important;
 border-radius:9px!important;background:var(--color-primary,var(--primary-color,#173b67))!important;
 color:#fff!important;font-family:Arial,sans-serif!important;font-size:20px!important;font-weight:700!important;
 line-height:1!important;cursor:pointer!important;box-shadow:0 3px 9px color-mix(in srgb,var(--color-primary,var(--primary-color,#173b67)) 22%,transparent)!important;
 transition:transform .16s ease,box-shadow .16s ease,filter .16s ease!important;
}
.modal-close:hover,.modal-close:focus-visible,
.cot-modal header>button[data-cot-close]:hover,.cot-modal header>button[data-cot-close]:focus-visible,
.cot-modal header>button[data-cot-detail-close]:hover,.cot-modal header>button[data-cot-detail-close]:focus-visible,
.cot-modal header>button[data-template-close]:hover,.cot-modal header>button[data-template-close]:focus-visible,
.cot-modal header>button[data-survey-close]:hover,.cot-modal header>button[data-survey-close]:focus-visible,
.cli-modal header>button[data-cli-close]:hover,.cli-modal header>button[data-cli-close]:focus-visible,
.inv-modal header>button[data-close]:hover,.inv-modal header>button[data-close]:focus-visible,
.op-modal-head>button:hover,#cerrar-modal-direccion:hover,#cerrar-modal-direccion:focus-visible{
 transform:translateY(-1px)!important;filter:brightness(1.08)!important;
 box-shadow:0 6px 14px color-mix(in srgb,var(--color-primary,var(--primary-color,#173b67)) 30%,transparent)!important;
 outline:none!important;
}

/* Controles de formulario uniformes en Safari, Chrome y Firefox.
   Se excluyen los selectores múltiples y los selectores ocultos de librerías. */
select:not([multiple]):not(.select2-hidden-accessible){
 -webkit-appearance:none!important;
 appearance:none!important;
 box-sizing:border-box;
 min-width:0;
 min-height:42px;
 padding-right:42px!important;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;
 background-repeat:no-repeat!important;
 background-position:right 13px center!important;
 background-size:14px 14px!important;
 font:inherit;
 line-height:1.2;
 text-overflow:ellipsis;
 cursor:pointer;
}
select:not([multiple]):not(.select2-hidden-accessible):disabled{
 cursor:not-allowed;
 opacity:1;
}
body.modo-nocturno select:not([multiple]):not(.select2-hidden-accessible),
[data-theme="dark"] select:not([multiple]):not(.select2-hidden-accessible){
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c5ceda' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;
}

input[type="date"],input[type="time"],input[type="datetime-local"]{
 box-sizing:border-box;
 min-width:0;
 min-height:42px;
 font:inherit;
 line-height:1.2;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value{
 min-height:1.2em;
 text-align:left;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
 cursor:pointer;
}
input[type="checkbox"],input[type="radio"]{
 accent-color:var(--color-primary,var(--primary-color,#173b67));
}

@media(max-width:720px){
 select:not([multiple]):not(.select2-hidden-accessible),
 input[type="date"],input[type="time"],input[type="datetime-local"]{
  min-height:46px;
  max-width:100%;
  font-size:16px;
 }
}