/*
 * Eventos | Cámara de Comercio Ecuador Shanghái China
 *
 * IDENTIDAD VISUAL PROVISIONAL: no se han proporcionado el logotipo ni los
 * colores oficiales. La paleta es deliberadamente neutra; al recibir los
 * colores institucionales basta con reemplazar --marca y --acento.
 */
:root {
  --marca: #1f2937;          /* reemplazar por el color institucional principal */
  --marca-texto: #ffffff;
  --acento: #8a6d3b;         /* reemplazar por el color institucional secundario */

  --fondo: #f7f7f5;
  --superficie: #ffffff;
  --borde: #e4e4e0;
  --texto: #18181b;
  --suave: #5b5b63;

  --exito: #15803d;  --exito-fondo: #dcfce7;
  --aviso: #92400e;  --aviso-fondo: #fef3c7;
  --error: #b91c1c;  --error-fondo: #fee2e2;

  --radio: 8px;
  --fuente: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 16px/1.55 var(--fuente); -webkit-font-smoothing: antialiased; }
h1 { font-size: 1.6rem; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 .35rem; font-weight: 650; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.contenedor { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.texto-suave { color: var(--suave); }
.fuerte { font-weight: 600; }
.etiqueta { font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--acento); margin: 0 0 .5rem; }

/* Marca */
.marca { display: inline-flex; align-items: center; gap: .75rem; }
.marca-logo { height: 2.25rem; width: auto; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.2; }
.marca-nombre { font-weight: 650; font-size: .95rem; letter-spacing: -0.01em; }
.marca-sub { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--suave); margin-top: .15rem; }
.enlace-marca { text-decoration: none; }

/* Portal público */
.publico { display: flex; flex-direction: column; min-height: 100dvh; }
.cabecera { background: var(--superficie); border-bottom: 1px solid var(--borde); }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; padding-bottom: 1rem; }
.principal { flex: 1; width: 100%; padding-top: 3rem; padding-bottom: 3rem; }
.portada { max-width: 40rem; padding: 3rem 0; }
.portada h1 { font-size: clamp(1.75rem, 4vw, 2.4rem); }
.pie { background: var(--superficie); border-top: 1px solid var(--borde); color: var(--suave); font-size: .875rem; padding: 1.5rem 0; }

/* Acceso */
.acceso { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1rem; }
.acceso-caja { width: 100%; max-width: 24rem; }
.acceso-marca { margin-bottom: 2rem; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.75rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.tarjeta-titulo { font-size: 1.25rem; }
.tarjeta .texto-suave { margin-top: 0; font-size: .9rem; }

/* Formularios */
.formulario { display: flex; flex-direction: column; gap: .35rem; margin-top: 1.25rem; }
.formulario label { font-size: .875rem; font-weight: 550; margin-top: .65rem; }
.formulario input, .formulario select, .formulario textarea {
  width: 100%; font: inherit; color: inherit; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 6px; padding: .65rem .75rem;
}
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { border-color: var(--marca); outline: none; box-shadow: 0 0 0 3px rgba(31,41,55,.12); }
.ayuda { font-size: .8rem; color: var(--suave); margin: 0; }
.boton { margin-top: 1.1rem; display: inline-flex; justify-content: center; align-items: center; gap: .5rem; font: inherit; font-weight: 600;
  background: var(--marca); color: var(--marca-texto); border: 0; border-radius: 6px; padding: .7rem 1.1rem; cursor: pointer; text-decoration: none; }
.boton:hover { filter: brightness(1.12); }
.boton[disabled] { opacity: .6; cursor: progress; }
.boton-texto { background: none; border: 0; padding: 0; font: inherit; color: var(--suave); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Avisos */
.aviso { border-radius: 6px; padding: .6rem .8rem; font-size: .9rem; margin: .75rem 0; }
.aviso-error { background: var(--error-fondo); color: var(--error); }
.aviso-aviso { background: var(--aviso-fondo); color: var(--aviso); }
.aviso-exito { background: var(--exito-fondo); color: var(--exito); }

/* Panel */
.panel-lateral { background: var(--superficie); border-bottom: 1px solid var(--borde); }
.panel-marca { padding: 1rem; }
.panel-nav { display: flex; gap: .25rem; overflow-x: auto; padding: 0 .5rem .75rem; scrollbar-width: none; }
.panel-nav a { white-space: nowrap; text-decoration: none; color: var(--suave); font-size: .9rem; padding: .5rem .75rem; border-radius: 6px; }
.panel-nav a:hover { background: var(--fondo); color: var(--texto); }
.panel-nav a[aria-current="page"] { background: var(--fondo); color: var(--texto); font-weight: 600; }
.panel-usuario { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; border-top: 1px solid var(--borde); padding: .6rem 1rem; font-size: .85rem; }
.panel-usuario-nombre { font-weight: 600; }
.panel-usuario-rol { color: var(--suave); flex: 1; }
.panel-contenido { padding: 1.5rem 1rem 3rem; max-width: 72rem; }

@media (min-width: 1024px) {
  .panel { display: grid; grid-template-columns: 16rem 1fr; min-height: 100dvh; }
  .panel-lateral { position: sticky; top: 0; height: 100dvh; border-bottom: 0; border-right: 1px solid var(--borde); display: flex; flex-direction: column; }
  .panel-marca { padding: 1.25rem 1rem 1.5rem; }
  .panel-nav { flex-direction: column; overflow: visible; padding: 0 .75rem; flex: 1; }
  .panel-usuario { flex-direction: column; align-items: flex-start; gap: .15rem; padding: 1rem; }
  .panel-usuario form { margin-top: .6rem; }
  .panel-contenido { padding: 2.5rem 2.5rem 4rem; }
}

.bloque-pendiente { margin-top: 1.5rem; border: 1px dashed var(--borde); border-radius: var(--radio); background: var(--superficie); padding: 1.5rem; }
.bloque-pendiente p:last-child { margin-bottom: 0; }

/* Tablas */
.tabla-envoltura { margin-top: 1.5rem; overflow-x: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.tabla { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: .9rem; }
.tabla th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); font-weight: 600; padding: .75rem 1rem; border-bottom: 1px solid var(--borde); }
.tabla td { padding: .75rem 1rem; border-bottom: 1px solid var(--borde); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Instalador */
.lista-requisitos { list-style: none; padding: 0; margin: 1rem 0; font-size: .9rem; }
.lista-requisitos li { display: flex; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--borde); }
.lista-requisitos .ok { color: var(--exito); font-weight: 700; }
.lista-requisitos .no { color: var(--error); font-weight: 700; }
.acceso-ancho { max-width: 34rem; }
fieldset { border: 0; padding: 0; margin: 1rem 0 0; }
legend { font-weight: 650; padding: 0; margin-bottom: .25rem; }