/* ============================================================================
 * econta-ui.css — Sistema de diseño común de eConta 2.0.
 * ----------------------------------------------------------------------------
 * La experiencia de Constitución (la más pulida del ecosistema) hecha piezas
 * comunes. Los VALORES de marca (colores, tipografías, logo) no viven aquí:
 * los define el hub (Identidad visual del cliente) y llegan en /app/marca.css,
 * que se carga después y pisa estas variables. Nada de colores sueltos: todo
 * sale de las variables, así una marca nueva cambia todas las pantallas.
 * ========================================================================== */
:root {
  /* Marca (las reemplaza /app/marca.css) */
  --ec-marca: #13294b;          /* principal: barras, botones, títulos */
  --ec-marca-2: #1d3a66;        /* principal al pasar el mouse */
  --ec-marca-suave: #eaf0f9;    /* fondos suaves de la marca */
  --ec-acento: #b8863b;         /* acento: detalles, pasos, sellos */
  --ec-acento-suave: #f7efe2;
  --ec-f-titulo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ec-f-texto: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Neutros y estados (comunes) */
  --ec-fondo: #f5f5f7; --ec-hoja: #ffffff; --ec-hoja-2: #fafafb;
  --ec-tinta: #1d1d1f; --ec-tinta-2: #4a4f5a; --ec-tinta-3: #646b78;
  --ec-linea: #e3e4e8; --ec-linea-2: #eef0f3;
  --ec-ok: #1f8a5b; --ec-ok-suave: #e6f4ec; --ec-aviso: #855b00; --ec-aviso-suave: #fff6dc; --ec-error: #c23b31; --ec-error-suave: #fdeeec;
  --ec-radio: 14px; --ec-radio-s: 10px; --ec-radio-l: 22px;
  --ec-sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 24px rgba(16, 24, 40, .06);
  --ec-sombra-2: 0 12px 40px rgba(16, 24, 40, .12);
  --ec-curva: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --ec-fondo: #0e1117; --ec-hoja: #161b24; --ec-hoja-2: #1b212c; --ec-tinta: #eef1f6; --ec-tinta-2: #b4bccb; --ec-tinta-3: #8a93a5;
    --ec-linea: #2a3140; --ec-linea-2: #222937; --ec-marca-suave: #17233a; --ec-acento-suave: #2c2414;
    --ec-ok-suave: #10291d; --ec-aviso-suave: #2c2310; --ec-error-suave: #2e1414; --ec-ok: #48c78e; --ec-aviso: #f2c46b; --ec-error: #ff8a80;
    --ec-sombra: 0 1px 2px rgba(0, 0, 0, .4); --ec-sombra-2: 0 16px 48px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.5 var(--ec-f-texto); color: var(--ec-tinta); background: var(--ec-fondo); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--ec-f-titulo); letter-spacing: -.02em; line-height: 1.15; margin: 0; }
a { color: var(--ec-marca); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--ec-acento) 70%, transparent); outline-offset: 2px; border-radius: 6px; }
.ec-oculto { display: none !important; }
.ec-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Botones */
.ec-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent;
  font: 600 15px/1 var(--ec-f-texto); cursor: pointer; text-decoration: none; transition: background .15s, transform .1s, box-shadow .15s; }
.ec-btn:active { transform: scale(.98); }
.ec-btn--principal { background: var(--ec-marca); color: #fff; }
.ec-btn--principal:hover { background: var(--ec-marca-2); }
.ec-btn--secundario { background: var(--ec-hoja); color: var(--ec-tinta); border-color: var(--ec-linea); }
.ec-btn--secundario:hover { background: var(--ec-hoja-2); }
.ec-btn--texto { background: none; color: var(--ec-marca); padding: 0 4px; min-height: 36px; text-decoration: underline; text-underline-offset: 3px; }
.ec-btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.ec-btn--ancho { width: 100%; }

/* Campos */
.ec-campo { display: grid; gap: 6px; margin-bottom: 14px; }
.ec-campo label { font-weight: 600; font-size: 14px; }
.ec-campo input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--ec-linea); border-radius: var(--ec-radio-s); background: var(--ec-hoja); color: var(--ec-tinta); font: 16px var(--ec-f-texto); }
.ec-campo input:focus { outline: none; border-color: var(--ec-marca); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ec-marca) 16%, transparent); }
.ec-ayuda { font-size: 13px; color: var(--ec-tinta-3); }

/* Avisos */
.ec-aviso { border-radius: var(--ec-radio-s); padding: 12px 14px; font-size: 14px; line-height: 1.45; margin: 12px 0; }
.ec-aviso--error { background: var(--ec-error-suave); color: var(--ec-error); }
.ec-aviso--ok { background: var(--ec-ok-suave); color: var(--ec-ok); }
.ec-aviso--info { background: var(--ec-marca-suave); color: var(--ec-tinta-2); display: flex; gap: 10px; align-items: center; }
.ec-aviso--info::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ec-marca) 30%, transparent); border-top-color: var(--ec-marca); animation: ec-girar .8s linear infinite; }
@keyframes ec-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ec-aviso--info::before { animation: none; } * { transition: none !important; } }

/* Tarjetas */
.ec-tarjeta { background: var(--ec-hoja); border: 1px solid var(--ec-linea); border-radius: var(--ec-radio-l); box-shadow: var(--ec-sombra); }

/* Barra superior común a todas las aplicaciones */
.ec-barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 clamp(16px, 4vw, 32px);
  background: color-mix(in srgb, var(--ec-hoja) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--ec-linea); }
.ec-barra__marca { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ec-tinta); text-decoration: none; min-width: 0; }
.ec-barra__marca img { height: 32px; width: auto; max-width: 140px; object-fit: contain; }
.ec-barra__sello { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--ec-marca); color: #fff; font-weight: 700; font-size: 14px; flex: none; }
.ec-barra__nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-barra__espacio { flex: 1; }
.ec-usuario { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ec-linea); background: var(--ec-hoja); border-radius: 999px; padding: 4px 12px 4px 4px; cursor: pointer; font: 600 14px var(--ec-f-texto); color: var(--ec-tinta); min-height: 40px; }
.ec-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ec-acento-suave); color: var(--ec-acento); font-weight: 700; font-size: 13px; }
.ec-menu { position: absolute; right: clamp(16px, 4vw, 32px); top: 56px; min-width: 220px; padding: 8px; background: var(--ec-hoja); border: 1px solid var(--ec-linea); border-radius: var(--ec-radio); box-shadow: var(--ec-sombra-2); }
.ec-menu a, .ec-menu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 10px 12px; border: 0; background: none; border-radius: 8px; color: var(--ec-tinta); text-decoration: none; font: 500 14px var(--ec-f-texto); cursor: pointer; text-align: left; }
.ec-menu a:hover, .ec-menu button:hover { background: var(--ec-hoja-2); }
.ec-menu hr { border: 0; border-top: 1px solid var(--ec-linea-2); margin: 6px 0; }
.ec-menu small { display: block; color: var(--ec-tinta-3); padding: 4px 12px 8px; }

/* ---------------------------------------------------------------------------
 * 2.0 · Lenguaje común (base Constitución). Un solo gesto propio: el marcapáginas
 * dorado que cuelga del borde de cada ficha principal, como en un expediente.
 * Todo lo demás, tranquilo: tinta, papel y una sola línea.
 * ------------------------------------------------------------------------- */
.ec-tarjeta { position: relative; }
.ec-tarjeta::before, .ec-ficha::before { content: ""; position: absolute; top: -1px; left: 24px; width: 12px; height: 20px; background: var(--ec-acento);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%); pointer-events: none; }
.ec-ficha { position: relative; background: var(--ec-hoja); border: 1px solid var(--ec-linea); border-radius: var(--ec-radio-l); padding: 28px 22px 22px; }
/* Campos: un pozo suave; al enfocar, la tinta de la marca con halo dorado; validado, el sello. */
.ec-campo input, .ec-campo select, .ec-campo textarea { background: var(--ec-hoja-2); transition: border-color .15s, box-shadow .15s, background-color .15s; }
.ec-campo input:hover { border-color: color-mix(in srgb, var(--ec-marca) 30%, var(--ec-linea)); }
.ec-campo input:focus, .ec-campo select:focus, .ec-campo textarea:focus { background: var(--ec-hoja); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ec-acento) 22%, transparent); }
.ec-campo input[required]:not([type=password]):valid:not(:focus) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23b8863b'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 42px; }
.ec-btn--principal { box-shadow: 0 8px 22px color-mix(in srgb, var(--ec-marca) 26%, transparent); }