/* ============================================================
   Clarion — identidad "Índigo IA" (light)
   Fondo #FFFFFF/#F7F8FC · Texto #1E1B3A · Primario índigo #4F46E5
   Acento cian #06B6D4 · Tinta IA / burbuja agente violeta #7C3AED
   ============================================================ */
:root {
    --clr-bg: #F7F8FC;
    --clr-surface: #FFFFFF;
    --clr-text: #1E1B3A;
    --clr-muted: #6B7280;
    --clr-primary: #4F46E5;
    --clr-primary-dark: #4338CA;
    --clr-accent: #06B6D4;
    --clr-ia: #7C3AED;
    --clr-ia-soft: #F3EEFE;
    --clr-border: #E5E7EB;
    --clr-ok: #059669;
    --clr-warn: #D97706;
    --clr-radius: 12px;
    --clr-shadow: 0 1px 3px rgba(30,27,58,.08), 0 1px 2px rgba(30,27,58,.04);
    --clr-font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--clr-font); color: var(--clr-text); background: var(--clr-bg); font-size: 15px; }
h1, h2, h3 { color: var(--clr-text); }
a { color: var(--clr-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Shell admin ---------- */
.clr-shell { display: flex; min-height: 100vh; }
.clr-nav {
    width: 220px; background: linear-gradient(170deg, #1E1B3A 0%, #2A2350 100%);
    color: #fff; display: flex; flex-direction: column; padding: 20px 0;
}
.clr-nav-logo { font-size: 1.3rem; font-weight: 700; padding: 0 20px 24px; display: flex; align-items: center; gap: 8px; }
.clr-logo-mark { color: var(--clr-accent); }
.clr-nav-links { list-style: none; margin: 0; padding: 0; flex: 1; }
.clr-nav-links li a {
    display: flex; align-items: center; gap: 10px; color: #C7C3E0;
    padding: 11px 20px; font-weight: 500; transition: all .15s;
}
.clr-nav-links li a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.clr-nav-links li a.active { background: var(--clr-primary); color: #fff; }
.clr-nav-ico { width: 18px; text-align: center; }
.clr-nav-foot { padding: 16px 20px 0; font-size: .72rem; color: #6B6790; }

.clr-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.clr-topbar {
    height: 60px; background: var(--clr-surface); border-bottom: 1px solid var(--clr-border);
    display: flex; align-items: center; justify-content: space-between; padding: 0 28px;
}
.clr-topbar-brand { font-weight: 700; color: var(--clr-primary); }
.clr-topbar-user { display: flex; align-items: center; gap: 14px; }
.clr-user-name { font-weight: 600; }
.clr-user-empresa { color: var(--clr-muted); font-size: .85rem; }
.clr-content { padding: 28px; max-width: 1200px; width: 100%; }

/* ---------- Tipografía de página ---------- */
.clr-h1 { font-size: 1.7rem; margin: 0 0 6px; }
.clr-sub { color: var(--clr-muted); margin: 0 0 20px; }
.clr-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }

/* ---------- Botones ---------- */
.clr-btn-primary {
    background: var(--clr-primary); color: #fff; border: none; border-radius: var(--clr-radius);
    padding: 10px 18px; font-size: .95rem; font-weight: 600; cursor: pointer; display: inline-block;
    transition: background .15s;
}
.clr-btn-primary:hover { background: var(--clr-primary-dark); text-decoration: none; color: #fff; }
.clr-btn-primary:disabled { opacity: .5; cursor: default; }
.clr-btn-ghost {
    background: transparent; color: var(--clr-primary); border: 1px solid var(--clr-border);
    border-radius: var(--clr-radius); padding: 8px 14px; font-weight: 600; cursor: pointer;
}
.clr-btn-ghost:hover { background: #F0F1F8; }
.clr-link { color: var(--clr-primary); font-weight: 600; }

/* ---------- Cards dashboard ---------- */
.clr-cards { display: flex; gap: 16px; flex-wrap: wrap; }
.clr-card {
    background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--clr-radius);
    padding: 22px; min-width: 160px; box-shadow: var(--clr-shadow);
}
.clr-card-num { font-size: 2.1rem; font-weight: 700; color: var(--clr-primary); }
.clr-card-lbl { color: var(--clr-muted); }
.clr-card-cta { display: flex; align-items: center; }

/* ---------- Tablas ---------- */
.clr-table { width: 100%; border-collapse: collapse; background: var(--clr-surface); border-radius: var(--clr-radius); overflow: hidden; box-shadow: var(--clr-shadow); }
.clr-table th { text-align: left; padding: 12px 14px; background: #F0F1F8; color: var(--clr-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.clr-table td { padding: 12px 14px; border-top: 1px solid var(--clr-border); }
.clr-num { text-align: right; font-variant-numeric: tabular-nums; }

.clr-badge { padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.clr-badge-borrador { background: #FEF3C7; color: var(--clr-warn); }
.clr-badge-listo { background: #D1FAE5; color: var(--clr-ok); }
.clr-badge-archivado { background: #E5E7EB; color: var(--clr-muted); }

.clr-empty { background: var(--clr-surface); border: 1px dashed var(--clr-border); border-radius: var(--clr-radius); padding: 40px; text-align: center; }

/* ---------- Formularios ---------- */
.clr-form-card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--clr-radius); padding: 24px; max-width: 560px; box-shadow: var(--clr-shadow); }
.clr-field { display: block; font-weight: 600; margin: 16px 0 6px; }
.clr-input { width: 100%; padding: 10px 12px; border: 1px solid var(--clr-border); border-radius: 10px; font-size: .95rem; font-family: inherit; }
.clr-input:focus { outline: none; border-color: var(--clr-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
.clr-rubro-pick { display: flex; gap: 12px; margin-bottom: 8px; }
.clr-rubro { flex: 1; background: var(--clr-surface); border: 2px solid var(--clr-border); border-radius: var(--clr-radius); padding: 16px; cursor: pointer; font-size: .95rem; font-weight: 600; display: flex; align-items: center; gap: 8px; justify-content: center; }
.clr-rubro.is-on { border-color: var(--clr-primary); background: #F0F1F8; color: var(--clr-primary); }
.clr-rubro-ico { font-size: 1.3rem; }

/* ---------- Login ---------- */
.clr-login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, #1E1B3A 0%, #4F46E5 100%); padding: 20px; }
.clr-login-card { background: var(--clr-surface); border-radius: 20px; padding: 40px; width: 100%; max-width: 400px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.clr-login-brand { text-align: center; font-size: 1.6rem; font-weight: 700; color: var(--clr-text); margin-bottom: 24px; }
.clr-login-tag { font-size: .9rem; font-weight: 400; color: var(--clr-muted); margin: 6px 0 0; }
.clr-login-form label { display: block; font-weight: 600; margin: 14px 0 6px; }
.clr-login-form input { width: 100%; padding: 11px 12px; border: 1px solid var(--clr-border); border-radius: 10px; font-size: .95rem; }
.clr-login-form .clr-btn-primary { width: 100%; margin-top: 20px; }
.clr-alert-error { background: #FEE2E2; color: #B91C1C; padding: 10px 14px; border-radius: 10px; font-size: .9rem; }

/* ---------- Chat ---------- */
.clr-chat-grid { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
.clr-chat { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--clr-radius); padding: 18px; box-shadow: var(--clr-shadow); }
.clr-thread { display: flex; flex-direction: column; gap: 12px; min-height: 200px; max-height: 460px; overflow-y: auto; padding-right: 6px; }
.clr-msg { padding: 11px 14px; border-radius: 14px; max-width: 85%; line-height: 1.45; }
.clr-msg p { margin: 0; white-space: pre-wrap; }
.clr-msg-usuario { align-self: flex-end; background: var(--clr-primary); color: #fff; border-bottom-right-radius: 4px; }
.clr-msg-agente { align-self: flex-start; background: var(--clr-ia-soft); color: #3B2B66; border-bottom-left-radius: 4px; border-left: 3px solid var(--clr-ia); }
.clr-msg-sistema { align-self: center; background: #F0F1F8; color: var(--clr-muted); font-size: .85rem; }
.clr-msg-typing { font-style: italic; color: var(--clr-ia); }

.clr-fotos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.clr-foto-item { position: relative; width: 64px; height: 64px; }
.clr-foto-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--clr-border); display: block; background: #F0F1F8; }
.clr-foto-del {
    position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
    border: none; background: #1E1B3A; color: #fff; font-size: 14px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.clr-foto-del:hover { background: #DC2626; }
.clr-foto-add { display: flex; gap: 8px; margin-top: 14px; align-items: center; flex-wrap: wrap; }
.clr-upload-btn { cursor: pointer; margin: 0; white-space: nowrap; }
.clr-foto-error { color: #DC2626; font-size: .85rem; margin: 8px 0 0; }
.clr-composer { display: flex; gap: 10px; margin-top: 14px; align-items: flex-end; }
.clr-composer textarea { resize: vertical; }

/* ---------- BOM ---------- */
.clr-bom { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--clr-radius); padding: 18px; box-shadow: var(--clr-shadow); position: sticky; top: 20px; }
.clr-bom-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.clr-bom-head h2 { font-size: 1.1rem; margin: 0; }
.clr-table-bom { box-shadow: none; }
.clr-table-bom th { background: var(--clr-ia-soft); color: var(--clr-ia); }
.clr-nota { color: var(--clr-muted); }
.clr-disclaimer { font-size: .8rem; color: var(--clr-muted); margin-top: 12px; font-style: italic; }

@media (max-width: 900px) {
    .clr-chat-grid { grid-template-columns: 1fr; }
    .clr-nav { width: 64px; }
    .clr-nav-logo span:last-child, .clr-nav-links li a span:last-child, .clr-nav-foot { display: none; }
}

@media print {
    .clr-nav, .clr-topbar, .clr-chat, .clr-page-head .clr-badge, .clr-disclaimer, .clr-bom-head button { display: none !important; }
    .clr-chat-grid { grid-template-columns: 1fr; }
    .clr-bom { box-shadow: none; border: none; }
}