/* ============================================================
   CEVADA ARQUITECTOS — sistema de diseño (1-oct-2026)

   Dos temas con los mismos nombres de variable:
     · claro  — crema cálido del dashboard, tarjetas blancas, botón negro
     · oscuro — negro cálido, botón amarillo
   El tema vive en <html data-theme="light|dark"> y lo pone cevada-tema.js
   antes de pintar (sin parpadeo). Las pantallas sólo usan variables: nunca
   un color escrito a mano.

   Las pantallas nuevas (inicio, Pendientes del equipo) usan las clases cv-*.
   Las demás conservan su maquetación y cevada-ui.css: ese archivo toma de
   aquí los colores, así que estos valores son la ÚNICA paleta de la app.
   ============================================================ */

:root,
html[data-theme="light"] {
  --cv-bg:        #F1EDE6;
  --cv-surface:   #FFFFFF;
  --cv-surface-2: #F8F5EF;
  --cv-ink:       #16150F;
  --cv-muted:     #77736A;
  --cv-muted-2:   #847E73;   /* terciario: placeholders, pies de dato */
  --cv-line:      #E6E0D4;
  --cv-accent:    #FFCF00;
  --cv-accent-ink:#6B5300;   /* amarillo legible como TEXTO sobre claro */
  --cv-accent-soft:#FFF3BF;
  --cv-accent-line:rgba(107,83,0,.30);
  --cv-primary-bg:#16150F;
  --cv-primary-fg:#FFFFFF;
  --cv-ok:        #1E8E5A;
  --cv-ok-soft:   #DDF3E7;
  --cv-warn:      #C96A12;
  --cv-warn-soft: #FCE8D2;
  --cv-danger:    #CC3B2B;
  --cv-danger-soft:#FBE2DD;
  --cv-shadow:    0 1px 2px rgba(22,21,15,.04), 0 14px 34px -14px rgba(22,21,15,.16);
  --cv-shadow-up: 0 -10px 40px -12px rgba(22,21,15,.22);
  --cv-nav-bg:    rgba(22,21,15,.92);
  --cv-nav-fg:    #F4F1EA;
  --cv-scrim:     rgba(22,21,15,.38);
  color-scheme: light;
}

html[data-theme="dark"] {
  --cv-bg:        #0D0D0C;
  --cv-surface:   #181816;
  --cv-surface-2: #21211E;
  --cv-ink:       #F4F1EA;
  --cv-muted:     #8F8B82;
  --cv-muted-2:   #6E6B64;
  --cv-line:      #2B2A26;
  --cv-accent:    #FFCF00;
  --cv-accent-ink:#FFCF00;
  --cv-accent-soft:#3A3212;
  --cv-accent-line:rgba(255,207,0,.32);
  --cv-primary-bg:#FFCF00;
  --cv-primary-fg:#16150F;
  --cv-ok:        #4CC38A;
  --cv-ok-soft:   #16301F;
  --cv-warn:      #F0954A;
  --cv-warn-soft: #3A2512;
  --cv-danger:    #F0705F;
  --cv-danger-soft:#3A1B16;
  --cv-shadow:    0 0 0 1px var(--cv-line);
  --cv-shadow-up: 0 -10px 40px -12px rgba(0,0,0,.6);
  --cv-nav-bg:    rgba(33,33,30,.94);
  --cv-nav-fg:    #F4F1EA;
  --cv-scrim:     rgba(0,0,0,.55);
  color-scheme: dark;
}

:root {
  --cv-r-card: 24px;
  --cv-r-in:   16px;
  --cv-r-pill: 999px;
  --cv-font:   'Inter', 'Segoe UI', system-ui, sans-serif;
  --cv-display:'Manrope', 'Inter', system-ui, sans-serif;
  --cv-ease:   cubic-bezier(.23, 1, .32, 1);
}

.cv * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body.cv {
  margin: 0;
  box-sizing: border-box;
  font-family: var(--cv-font);
  background: var(--cv-bg);
  color: var(--cv-ink);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s var(--cv-ease), color .25s var(--cv-ease);
}
.cv :focus-visible { outline: 2px solid var(--cv-accent-ink); outline-offset: 2px; border-radius: 6px; }
.cv button, .cv input, .cv select, .cv textarea { font: inherit; color: inherit; }

/* ── Tipografía ── */
.cv-display { font-family: var(--cv-display); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; }
.cv-h1 { font-family: var(--cv-display); font-weight: 800; font-size: clamp(26px, 5.2vw, 38px); letter-spacing: -.025em; line-height: 1.06; }
.cv-h2 { font-family: var(--cv-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.cv-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cv-muted); }
.cv-muted { color: var(--cv-muted); }
.cv-num { font-family: var(--cv-display); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }

/* ── Superficies ── */
.cv-card { background: var(--cv-surface); border-radius: var(--cv-r-card); box-shadow: var(--cv-shadow); }
.cv-card-pad { padding: 20px; }
.cv-well { background: var(--cv-surface-2); border-radius: var(--cv-r-in); }

/* ── Botones ── */
.cv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border: none; border-radius: var(--cv-r-pill);
  font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; white-space: nowrap;
  background: var(--cv-surface-2); color: var(--cv-ink);
  transition: transform .14s var(--cv-ease), background-color .18s var(--cv-ease), opacity .18s;
}
.cv-btn:active { transform: scale(.97); }
.cv-btn:disabled { opacity: .45; cursor: not-allowed; }
.cv-btn-primary { background: var(--cv-primary-bg); color: var(--cv-primary-fg); }
.cv-btn-accent  { background: var(--cv-accent); color: #16150F; }
.cv-btn-ghost   { background: transparent; box-shadow: inset 0 0 0 1px var(--cv-line); }
.cv-btn-danger  { background: var(--cv-danger-soft); color: var(--cv-danger); }
.cv-btn-block   { width: 100%; }
.cv-btn-sm      { min-height: 36px; padding: 0 14px; font-size: 13px; }
.cv-icon-btn {
  width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; cursor: pointer; text-decoration: none;
  background: var(--cv-surface); color: var(--cv-ink); box-shadow: var(--cv-shadow);
  transition: transform .14s var(--cv-ease);
}
.cv-icon-btn:active { transform: scale(.94); }

/* ── Píldoras y fichas ── */
.cv-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 11px;
  border-radius: var(--cv-r-pill); font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--cv-surface-2); color: var(--cv-muted);
}
.cv-chip-urgente { background: var(--cv-danger-soft); color: var(--cv-danger); }
.cv-chip-alta    { background: var(--cv-warn-soft);   color: var(--cv-warn); }
.cv-chip-media   { background: var(--cv-accent-soft); color: var(--cv-accent-ink); }
.cv-chip-ok      { background: var(--cv-ok-soft);     color: var(--cv-ok); }
.cv-chip-apoyo   { background: var(--cv-accent); color: #16150F; }

/* Selector segmentado (pestañas) */
.cv-seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--cv-r-pill); background: var(--cv-surface); box-shadow: var(--cv-shadow); }
.cv-seg button {
  min-height: 40px; padding: 0 18px; border: none; border-radius: var(--cv-r-pill); cursor: pointer;
  background: transparent; color: var(--cv-muted); font-weight: 600; font-size: 14px;
  transition: background-color .2s var(--cv-ease), color .2s var(--cv-ease);
}
.cv-seg button[aria-selected="true"] { background: var(--cv-primary-bg); color: var(--cv-primary-fg); }

/* ── Campos ── */
.cv-label { display: block; font-size: 12px; font-weight: 600; color: var(--cv-muted); margin-bottom: 6px; }
.cv-field {
  width: 100%; min-height: 48px; padding: 12px 16px; border-radius: var(--cv-r-in);
  border: 1px solid var(--cv-line); background: var(--cv-surface-2); color: var(--cv-ink);
  font-size: 16px; outline: none; transition: border-color .18s var(--cv-ease), box-shadow .18s var(--cv-ease);
}
textarea.cv-field { min-height: 92px; resize: vertical; line-height: 1.4; }
.cv-field:focus { border-color: var(--cv-ink); box-shadow: 0 0 0 3px var(--cv-accent-soft); }
.cv-field::placeholder { color: var(--cv-muted); opacity: .8; }
select.cv-field { appearance: none; -webkit-appearance: none; padding-right: 40px;
  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='%2377736A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
/* Filtro en forma de píldora (un <select> nativo: abre el selector del teléfono) */
select.cv-filtro {
  appearance: none; -webkit-appearance: none; min-height: 38px; padding: 0 34px 0 14px;
  border-radius: var(--cv-r-pill); border: 1px solid var(--cv-line); background-color: var(--cv-surface);
  color: var(--cv-ink); font-size: 13px; font-weight: 600; cursor: pointer; max-width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2377736A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
select.cv-filtro.activo { background-color: var(--cv-primary-bg); color: var(--cv-primary-fg); border-color: transparent; }

/* ── Barra de navegación flotante (celular y tablet) ── */
.cv-nav {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: 4px; padding: 6px;
  border-radius: var(--cv-r-pill); background: var(--cv-nav-bg); color: var(--cv-nav-fg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.5);
}
.cv-nav a, .cv-nav button {
  min-width: 52px; height: 48px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: none; border-radius: var(--cv-r-pill); background: transparent; color: inherit;
  font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; opacity: .72;
  transition: background-color .2s var(--cv-ease), opacity .2s, transform .14s var(--cv-ease);
}
.cv-nav [aria-current="page"], .cv-nav [aria-selected="true"] { background: var(--cv-accent); color: #16150F; opacity: 1; }
.cv-nav .cv-nav-mas { background: #F4F1EA; color: #16150F; opacity: 1; width: 48px; min-width: 48px; padding: 0; }
.cv-nav button:active, .cv-nav a:active { transform: scale(.94); }

/* ── Hoja deslizable (celular) / diálogo centrado (pantalla ancha) ── */
.cv-scrim {
  position: fixed; inset: 0; z-index: 80; background: var(--cv-scrim);
  opacity: 0; pointer-events: none; transition: opacity .22s var(--cv-ease);
}
.cv-scrim.abierta { opacity: 1; pointer-events: auto; }
.cv-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; max-height: 92vh; overflow-y: auto;
  padding: 10px 20px calc(22px + env(safe-area-inset-bottom));
  background: var(--cv-surface); border-radius: 28px 28px 0 0; box-shadow: var(--cv-shadow-up);
  transform: translateY(104%); transition: transform .28s var(--cv-ease); visibility: hidden;
}
.cv-sheet.abierta { transform: translateY(0); visibility: visible; }
.cv-sheet-asa { width: 40px; height: 4px; border-radius: 4px; background: var(--cv-line); margin: 0 auto 16px; }
@media (min-width: 720px) {
  .cv-sheet {
    left: 50%; right: auto; bottom: auto; top: 50%; width: min(520px, calc(100vw - 48px));
    border-radius: 28px; padding: 26px; transform: translate(-50%, -46%) scale(.97); opacity: 0;
    transition: transform .22s var(--cv-ease), opacity .22s var(--cv-ease);
  }
  .cv-sheet.abierta { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .cv-sheet-asa { display: none; }
}

/* ── Achurado de plano: la firma del despacho. Marca "hoy / en curso". ── */
.cv-achurado {
  background-image: repeating-linear-gradient(135deg, var(--cv-accent) 0 3px, transparent 3px 7px);
  background-color: var(--cv-accent-soft);
}

/* Aviso flotante */
.cv-toast {
  position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top)); z-index: 120;
  transform: translate(-50%, -140%); padding: 12px 18px; border-radius: var(--cv-r-pill);
  background: var(--cv-primary-bg); color: var(--cv-primary-fg); font-size: 14px; font-weight: 600;
  box-shadow: 0 16px 36px -14px rgba(0,0,0,.45); max-width: calc(100vw - 32px);
  transition: transform .3s var(--cv-ease);
}
.cv-toast.visible { transform: translate(-50%, 0); }
.cv-toast.error { background: var(--cv-danger); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .cv *, .cv-sheet, .cv-scrim, .cv-toast { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}