/* ============================================================
   Portal CCSAC - Design tokens y componentes base
   Punto unico para cambiar la apariencia visual del portal.
   Para "modo otro cliente": override de --color-brand-*
   ============================================================ */

:root {
    /* ===== Paleta base (marca actual: Vanegas + CCSAC) ===== */
    --color-brand-navy:   #1A3F8C;
    --color-brand-orange: #E97411;
    --color-brand-cyan:   #008CC8;
    --color-brand-light:  #EBF5FC;

    /* ===== Roles semanticos (USAR SIEMPRE estos en los templates) ===== */
    --color-primary:        var(--color-brand-orange);
    --color-primary-hover:  #D26810;
    --color-primary-text:   #FFFFFF;

    --color-secondary:      var(--color-brand-navy);
    --color-secondary-hover:#142F69;
    --color-secondary-text: #FFFFFF;

    --color-accent:         var(--color-brand-cyan);
    --color-accent-hover:   #006B97;
    --color-bg-section:     var(--color-brand-light);

    --color-bg-page:        #F8FAFC;
    --color-bg-card:        #FFFFFF;
    --color-bg-input:       #FFFFFF;
    --color-bg-page-alt:    #F1F5F9;

    --color-border-subtle:  #E2E8F0;
    --color-border-strong:  #CBD5E1;
    --color-border-focus:   var(--color-accent);

    /* Texto: contraste alto por default (boomer-friendly) */
    --color-text-primary:   #0F172A;
    --color-text-body:      #1E293B;
    --color-text-muted:     #475569;
    --color-text-faint:     #64748B;
    --color-text-on-dark:   #F8FAFC;

    /* ===== Estados de workflow (desacoplados de la marca) ===== */
    --color-state-pending-bg:     #FEF3C7;
    --color-state-pending-text:   #92400E;
    --color-state-pending-border: #F59E0B;

    --color-state-review-bg:      #DBEAFE;
    --color-state-review-text:    #1E40AF;
    --color-state-review-border:  #2563EB;

    --color-state-done-bg:        #D1FAE5;
    --color-state-done-text:      #065F46;
    --color-state-done-border:    #059669;

    --color-state-rejected-bg:    #FEE2E2;
    --color-state-rejected-text:  #991B1B;
    --color-state-rejected-border:#DC2626;

    /* ===== Feedback (alertas, banners, toasts) ===== */
    --color-feedback-error-bg:     #FEF2F2;
    --color-feedback-error-text:   #991B1B;
    --color-feedback-error-border: #DC2626;

    --color-feedback-success-bg:     #ECFDF5;
    --color-feedback-success-text:   #065F46;
    --color-feedback-success-border: #059669;

    --color-feedback-warning-bg:     #FFFBEB;
    --color-feedback-warning-text:   #92400E;
    --color-feedback-warning-border: #F59E0B;

    --color-feedback-info-bg:     var(--color-brand-light);
    --color-feedback-info-text:   var(--color-brand-navy);
    --color-feedback-info-border: var(--color-brand-cyan);

    /* ===== Tipografia ===== */
    --font-family-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-mono: 'SF Mono', 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;

    /* Sin <14px en produccion. Body por default = 16px (anti-zoom iOS). */
    --font-size-xs:   0.875rem;  /* 14px - micro */
    --font-size-sm:   0.9375rem; /* 15px - secundario */
    --font-size-base: 1rem;      /* 16px - body, inputs, botones */
    --font-size-lg:   1.125rem;  /* 18px - labels destacados */
    --font-size-xl:   1.25rem;   /* 20px - h2 */
    --font-size-2xl:  1.5rem;    /* 24px - h1 */
    --font-size-3xl:  1.875rem;  /* 30px - KPI */

    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --line-height-tight:   1.2;
    --line-height-normal:  1.5;
    --line-height-relaxed: 1.7;

    /* ===== Tap targets (mobile-first) ===== */
    --tap-target-min:         44px;  /* minimo absoluto (Apple HIG) */
    --tap-target-comfortable: 48px;  /* default para inputs y botones */
    --tap-target-primary:     52px;  /* CTA principal */

    /* ===== Espaciado ===== */
    --space-1: 0.25rem;  /* 4px  */
    --space-2: 0.5rem;   /* 8px  */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.25rem;  /* 20px */
    --space-6: 1.5rem;   /* 24px */
    --space-8: 2rem;     /* 32px */
    --space-10: 2.5rem;  /* 40px */

    --card-padding:    var(--space-4);
    --card-padding-lg: var(--space-6);
    --section-gap:     var(--space-6);
    --field-gap:       var(--space-4);

    /* ===== Bordes y radios ===== */
    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-pill: 9999px;

    --border-width-default:  1px;
    --border-width-emphasis: 2px;

    /* ===== Sombras ===== */
    --shadow-card:       0 1px 3px 0 rgba(0,0,0,.06), 0 1px 2px 0 rgba(0,0,0,.04);
    --shadow-card-hover: 0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -1px rgba(0,0,0,.04);
    --shadow-modal:      0 10px 25px -5px rgba(0,0,0,.15), 0 4px 6px -2px rgba(0,0,0,.08);
    --shadow-focus:      0 0 0 3px rgba(0,140,200,.4);
    --shadow-sticky:     0 -2px 8px rgba(0,0,0,.06);

    /* ===== Transiciones ===== */
    --transition-fast:   .15s ease-out;
    --transition-normal: .25s ease-out;

    /* ===== Z-index (lista canonica) ===== */
    --z-sticky:   10;
    --z-sidebar:  40;
    --z-modal:    50;
    --z-toast:    60;
}

/* ============================================================
   Reset / base
   ============================================================ */
html { font-size: 16px; }
body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-body);
    background: var(--color-bg-page);
}
.font-mono { font-family: var(--font-family-mono); }

/* Focus visible coherente en TODO control interactivo */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-color: var(--color-border-focus);
}

/* ============================================================
   Botones
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap-target-comfortable);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    border: var(--border-width-default) solid transparent;
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    cursor: pointer;
    transition: background-color var(--transition-fast), opacity var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}
.btn:disabled,
.btn[aria-busy="true"] { opacity: .6; cursor: not-allowed; }

.btn-primary {
    background: var(--color-primary);
    color: var(--color-primary-text);
}
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }

.btn-secondary {
    background: var(--color-bg-card);
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}
.btn-secondary:hover:not(:disabled) { background: var(--color-bg-section); }

.btn-accent {
    background: var(--color-accent);
    color: #FFFFFF;
}
.btn-accent:hover:not(:disabled) { background: var(--color-accent-hover); }

.btn-ghost {
    background: transparent;
    color: var(--color-text-muted);
    border-color: var(--color-border-strong);
}
.btn-ghost:hover:not(:disabled) { background: var(--color-bg-page-alt); }

.btn-danger {
    background: var(--color-feedback-error-border);
    color: #FFFFFF;
}
.btn-danger:hover:not(:disabled) { background: #B91C1C; }

.btn-success {
    background: var(--color-feedback-success-border);
    color: #FFFFFF;
}
.btn-success:hover:not(:disabled) { background: #047857; }

/* CTA grande (subir captura, ingresar, enviar) */
.btn-cta {
    min-height: var(--tap-target-primary);
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-base);
}

/* Boton inline para tablas - sigue cumpliendo tap target minimo */
.btn-sm {
    min-height: var(--tap-target-min);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
}

.btn-block { width: 100%; }

/* ============================================================
   Card
   ============================================================ */
.card {
    background: var(--color-bg-card);
    border: var(--border-width-default) solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--card-padding);
    box-shadow: var(--shadow-card);
}
.card-lg { padding: var(--card-padding-lg); }

.card-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3) 0;
}
.card-title-lg {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-secondary);
    margin: 0 0 var(--space-3) 0;
}

.card-clickable {
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}
.card-clickable:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-card-hover);
}

/* ============================================================
   Inputs / form
   ============================================================ */
.input,
.select,
.textarea {
    display: block;
    width: 100%;
    min-height: var(--tap-target-comfortable);
    padding: var(--space-3);
    border: var(--border-width-default) solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    background: var(--color-bg-input);
    color: var(--color-text-body);
}
.textarea { min-height: calc(var(--tap-target-comfortable) * 2); resize: vertical; }
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
    border-color: var(--color-feedback-error-border);
}

.label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-body);
    margin-bottom: var(--space-1);
}
.label-required::after {
    content: " *";
    color: var(--color-feedback-error-border);
    font-weight: var(--font-weight-bold);
}
.help {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
    line-height: var(--line-height-normal);
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--field-gap);
}

/* ============================================================
   Badge (estados de captura)
   ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    white-space: nowrap;
}
.badge-pending  { background: var(--color-state-pending-bg);  color: var(--color-state-pending-text); }
.badge-review   { background: var(--color-state-review-bg);   color: var(--color-state-review-text); }
.badge-done     { background: var(--color-state-done-bg);     color: var(--color-state-done-text); }
.badge-rejected { background: var(--color-state-rejected-bg); color: var(--color-state-rejected-text); }
.badge-neutral  { background: var(--color-border-subtle);     color: var(--color-text-muted); }
.badge-info     { background: var(--color-feedback-info-bg);  color: var(--color-feedback-info-text); }

/* Chip de filtro: tap target 40px */
.chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    border: var(--border-width-default) solid var(--color-border-strong);
    background: var(--color-bg-card);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.chip:hover { border-color: var(--color-primary); }
.chip-active {
    background: var(--color-secondary);
    color: var(--color-secondary-text);
    border-color: var(--color-secondary);
}
.chip-pending  { background: var(--color-state-pending-border); color: #FFFFFF; border-color: var(--color-state-pending-border); }
.chip-review   { background: var(--color-state-review-border);  color: #FFFFFF; border-color: var(--color-state-review-border); }
.chip-done     { background: var(--color-state-done-border);    color: #FFFFFF; border-color: var(--color-state-done-border); }
.chip-rejected { background: var(--color-state-rejected-border); color: #FFFFFF; border-color: var(--color-state-rejected-border); }

/* ============================================================
   Alert / banner
   ============================================================ */
.alert {
    border-left: 4px solid;
    border-radius: var(--radius-md);
    padding: var(--space-4);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}
.alert-error    { background: var(--color-feedback-error-bg);   border-color: var(--color-feedback-error-border);   color: var(--color-feedback-error-text); }
.alert-success  { background: var(--color-feedback-success-bg); border-color: var(--color-feedback-success-border); color: var(--color-feedback-success-text); }
.alert-warning  { background: var(--color-feedback-warning-bg); border-color: var(--color-feedback-warning-border); color: var(--color-feedback-warning-text); }
.alert-info     { background: var(--color-feedback-info-bg);    border-color: var(--color-feedback-info-border);    color: var(--color-feedback-info-text); }

/* ============================================================
   Toast
   ============================================================ */
.toast {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-modal);
    background: var(--color-bg-card);
    border-left: 4px solid var(--color-accent);
    font-size: var(--font-size-sm);
    animation: toast-in var(--transition-normal);
    max-width: calc(100vw - var(--space-8));
    margin-bottom: var(--space-2);
}
.toast-success { border-color: var(--color-feedback-success-border); }
.toast-error   { border-color: var(--color-feedback-error-border); }
.toast-warning { border-color: var(--color-feedback-warning-border); }
@keyframes toast-in {
    from { transform: translateY(-12px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* ============================================================
   Sticky footer (boton principal pegado abajo en movil)
   ============================================================ */
.sticky-footer {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-bg-card);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-sticky);
    border-top: var(--border-width-default) solid var(--color-border-subtle);
    z-index: var(--z-sticky);
    margin-top: var(--space-6);
}

/* ============================================================
   Sidebar item (44px minimo)
   ============================================================ */
.nav-item {
    display: flex;
    align-items: center;
    min-height: var(--tap-target-min);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-on-dark);
    font-size: var(--font-size-sm);
    text-decoration: none;
    line-height: var(--line-height-tight);
}
.nav-item:hover { background: rgba(255,255,255,.10); }
.nav-item-active { background: rgba(255,255,255,.18); font-weight: var(--font-weight-semibold); }
.nav-section-title {
    padding: var(--space-3) var(--space-3) var(--space-1);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(248,250,252,.55);
}
.nav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-target-min);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: var(--color-primary-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    margin: var(--space-2) 0;
    text-align: center;
}
.nav-cta:hover { background: var(--color-primary-hover); }

/* ============================================================
   Tabla de datos (desktop)
   ============================================================ */
.table-data {
    width: 100%;
    font-size: var(--font-size-xs);
    border-collapse: collapse;
}
.table-data thead {
    background: var(--color-bg-section);
    color: var(--color-text-body);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.table-data th {
    padding: var(--space-3);
    text-align: left;
    font-weight: var(--font-weight-semibold);
}
.table-data td {
    padding: var(--space-3);
    border-top: var(--border-width-default) solid var(--color-border-subtle);
    font-size: var(--font-size-xs);
    color: var(--color-text-body);
}
.table-data tbody tr:hover { background: var(--color-bg-page-alt); }
.table-data tbody tr.row-clickable { cursor: pointer; }

/* ============================================================
   TomSelect (override del componente vendor)
   ============================================================ */
.ts-control {
    font-size: var(--font-size-base) !important;
    min-height: var(--tap-target-comfortable) !important;
    padding: var(--space-2) var(--space-3) !important;
    border-radius: var(--radius-md) !important;
    border-color: var(--color-border-strong) !important;
}

/* ============================================================
   Captura nueva - cards de tipo
   ============================================================ */
.tipo-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: var(--border-width-emphasis) solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
    min-height: 76px;
    text-align: left;
}
.tipo-card:hover { border-color: var(--color-primary); }
.tipo-card-active {
    border-color: var(--color-primary);
    background: #FFF7ED;
}
.tipo-card-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-secondary);
    background: var(--color-bg-section);
    border-radius: var(--radius-md);
}
.tipo-card-active .tipo-card-icon {
    background: var(--color-primary);
    color: var(--color-primary-text);
}
.tipo-card-body { flex: 1 1 auto; min-width: 0; }
.tipo-card-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 2px 0;
}
.tipo-card-desc {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0;
    line-height: var(--line-height-normal);
}

/* Boton de adjuntos (camara / archivo) */
.attach-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 88px;
    padding: var(--space-3);
    border: var(--border-width-emphasis) dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    color: var(--color-text-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.attach-btn:hover {
    border-color: var(--color-primary);
    background: #FFF7ED;
}
.attach-btn svg { width: 28px; height: 28px; color: var(--color-secondary); }

.attach-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border: var(--border-width-default) solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
}
.attach-thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-page-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    overflow: hidden;
}
.attach-thumb img { width: 100%; height: 100%; object-fit: cover; }
.attach-info { flex: 1 1 auto; min-width: 0; }
.attach-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.attach-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}
.attach-remove {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: var(--font-size-xl);
}
.attach-remove:hover { background: var(--color-feedback-error-bg); color: var(--color-feedback-error-text); }

/* Spinner para "Enviando..." */
.spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .6s linear infinite;
    vertical-align: -0.2em;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   Utilidades de color (clases legacy + semanticas)
   ============================================================ */
.text-primary    { color: var(--color-primary); }
.text-secondary  { color: var(--color-secondary); }
.text-accent     { color: var(--color-accent); }
.text-muted      { color: var(--color-text-muted); }
.bg-primary      { background: var(--color-primary); }
.bg-secondary    { background: var(--color-secondary); }
.bg-section      { background: var(--color-bg-section); }
.bg-accent       { background: var(--color-accent); }
.border-primary  { border-color: var(--color-primary); }
.border-accent   { border-color: var(--color-accent); }
.border-secondary{ border-color: var(--color-secondary); }

/* Clases legacy (mantenidas durante la migracion). Apuntan a tokens. */
.text-vanegas-navy    { color: var(--color-secondary); }
.text-vanegas-naranja { color: var(--color-primary); }
.text-ccsac-cyan      { color: var(--color-accent); }
.bg-vanegas-navy      { background: var(--color-secondary); }
.bg-vanegas-naranja   { background: var(--color-primary); }
.bg-ccsac-cyan        { background: var(--color-accent); }
.bg-ccsac-light       { background: var(--color-bg-section); }
.border-vanegas-navy    { border-color: var(--color-secondary); }
.border-vanegas-naranja { border-color: var(--color-primary); }
.border-ccsac-cyan      { border-color: var(--color-accent); }

/* ============================================================
   Responsive: ajustes mobile-first
   ============================================================ */
@media (max-width: 767px) {
    :root {
        --card-padding: var(--space-3);
        --section-gap:  var(--space-4);
    }
    .btn-cta-mobile-block { width: 100%; }
}