/* ============================================================
   Panel de contenido — Dra. Cecilia Araya
   Misma paleta y tipografías del sitio, para que Cecilia sienta
   que es su herramienta y no un formulario genérico.
   ============================================================ */

@font-face { font-family: Onest; src: url(/fonts/onest-variable.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Gilnger; src: url(/fonts/gilnger-regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --blanco: #ffffff;
  --crema: #f3eee5;
  --crema-claro: #faf7f2;
  --crema-hondo: #e7dfd1;
  --oliva: #5d5832;
  --oliva-hondo: #4a4628;
  --terracota: #c05f2c;
  --mostaza: #ce9639;
  --marron: #5a4023;
  --marron-suave: #7e6a4e;
  --tinta: #2e2418;
  --linea: rgba(90, 64, 35, 0.14);
  --linea-fuerte: rgba(90, 64, 35, 0.28);
  --error: #b2502a;
  --ok: #5d5832;
  --sombra: 0 18px 50px -24px rgba(90, 64, 35, 0.32);
  --radio: 14px;
  --nav: 264px;
  --barra: 76px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* El atributo hidden tiene que ganarle al display de .app y .login. */
[hidden] { display: none !important; }

body {
  font-family: Onest, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--crema-claro);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: Gilnger, Georgia, serif; font-weight: 400; color: var(--oliva); line-height: 1.1; letter-spacing: -0.01em; }

.marca { font-family: Gilnger, Georgia, serif; font-size: 1.35rem; letter-spacing: -0.01em; white-space: nowrap; }
.marca small { font-family: Onest, sans-serif; font-size: 0.55rem; letter-spacing: 0.12em; text-transform: lowercase; vertical-align: 0.35em; margin-right: 0.15em; opacity: 0.8; }

:focus-visible { outline: 2px solid var(--mostaza); outline-offset: 2px; border-radius: 4px; }

/* ---------------------------------------------------------- Botones */

.btn {
  font: inherit; font-weight: 500; cursor: pointer;
  border-radius: 999px; border: 1px solid transparent;
  padding: 0.6rem 1.4rem;
  transition: background-color .25s, color .25s, border-color .25s, opacity .25s;
}
.btn--primario { background: var(--mostaza); color: var(--blanco); }
.btn--primario:hover:not(:disabled) { background: var(--terracota); }
.btn--fantasma { background: transparent; color: var(--oliva); border-color: var(--linea-fuerte); }
.btn--fantasma:hover:not(:disabled) { background: rgba(90,64,35,.06); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--chico { padding: 0.35rem 0.85rem; font-size: 13px; }

/* ---------------------------------------------------------- Login */

.login { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background: radial-gradient(ellipse at 30% 20%, rgba(206,150,57,.18) 0%, transparent 55%),
              radial-gradient(ellipse at 75% 80%, rgba(192,95,44,.12) 0%, transparent 55%), var(--crema); }
.login__card { width: 100%; max-width: 380px; background: var(--blanco); border-radius: 22px;
  box-shadow: var(--sombra); padding: 2.5rem 2.25rem; display: flex; flex-direction: column; gap: .5rem; }
.login__marca { margin-bottom: 1.5rem; color: var(--oliva); }
.login__card h1 { font-size: 1.5rem; }
.login__ayuda { color: var(--marron-suave); font-size: 14px; margin-bottom: 1.25rem; }
.login__card label { font-size: 13px; font-weight: 500; color: var(--marron); }
.login__card input { font: inherit; padding: .7rem .9rem; border: 1px solid var(--linea); border-radius: 10px;
  background: var(--crema-claro); margin-bottom: 1.25rem; }
.login__card input:focus { outline: none; border-color: var(--oliva); }
.login__error { color: var(--error); font-size: 14px; margin-top: .85rem; }

/* ---------------------------------------------------------- Layout */

.app { display: grid; grid-template-columns: var(--nav) minmax(0, 1fr); min-height: 100vh; }

.nav { background: var(--oliva); color: var(--crema); padding: 1.75rem 1.25rem;
  display: flex; flex-direction: column; gap: 1.75rem; position: sticky; top: 0; height: 100vh; }
.nav__marca { padding-left: .5rem; }
.nav__lista { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; min-width: 0; }
.nav__item { font: inherit; text-align: left; background: none; border: 0; cursor: pointer;
  color: rgba(243,238,229,.72); padding: .6rem .75rem; border-radius: 9px; transition: background-color .2s, color .2s; }
.nav__item:hover { color: var(--crema); background: rgba(243,238,229,.09); }
.nav__item[aria-current="true"] { background: rgba(243,238,229,.16); color: #fff; font-weight: 500; }
.nav__item .marca-cambio { color: var(--mostaza); margin-left: .35rem; }
.nav__pie { display: flex; flex-direction: column; gap: .35rem; border-top: 1px solid rgba(243,238,229,.16); padding-top: 1.25rem; }
.nav__link { font: inherit; font-size: 13px; color: rgba(243,238,229,.65); text-decoration: none;
  background: none; border: 0; text-align: left; padding: .3rem .75rem; cursor: pointer; border-radius: 8px; }
.nav__link:hover { color: var(--crema); background: rgba(243,238,229,.09); }

.panel { padding: 2.5rem 3rem calc(var(--barra) + 3rem); max-width: 900px; }
.panel__cargando { color: var(--marron-suave); padding: 3rem 0; }

/* ---------------------------------------------------------- Secciones */

.seccion__titulo { font-size: 2.1rem; margin-bottom: .4rem; }
.seccion__desc { color: var(--marron-suave); font-size: 14px; max-width: 62ch; margin-bottom: 2.25rem; }

.grupo { margin-bottom: 2.5rem; }
.grupo__titulo { font-family: Onest, sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--marron-suave);
  padding-bottom: .6rem; border-bottom: 1px solid var(--linea); margin-bottom: 1.5rem; }
.grupo__desc { color: var(--marron-suave); font-size: 13.5px; margin: -0.9rem 0 1.5rem; max-width: 62ch; }

/* ---------------------------------------------------------- Campos */

.campo { margin-bottom: 1.6rem; }
.campo__label { display: block; font-size: 13px; font-weight: 500; color: var(--marron); margin-bottom: .4rem; }
.campo__ayuda { font-size: 12.5px; color: var(--marron-suave); margin-top: .4rem; line-height: 1.5; }

.campo input[type=text], .campo textarea, .campo select {
  font: inherit; width: 100%; padding: .65rem .85rem; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: 10px; color: var(--tinta); transition: border-color .2s;
}
.campo textarea { resize: vertical; line-height: 1.6; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-color: var(--oliva); }
.campo input[readonly] { background: var(--crema-claro); color: var(--marron-suave); }

.contador { float: right; font-size: 11.5px; color: var(--marron-suave); opacity: .8; font-variant-numeric: tabular-nums; }
.contador--cerca { color: var(--mostaza); opacity: 1; }
.contador--pasado { color: var(--error); opacity: 1; }

/* Editor visual: los titulares se ven con la tipografía real del sitio. */
.rico { border: 1px solid var(--linea); border-radius: 10px; background: var(--blanco); overflow: hidden; transition: border-color .2s; }
.rico:focus-within { border-color: var(--oliva); }
.rico__barra { display: flex; gap: .25rem; padding: .35rem .4rem; border-bottom: 1px solid var(--linea); background: var(--crema-claro); }
.rico__barra:empty { display: none; }
.rico__boton { font: inherit; font-size: 12.5px; display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 1px solid transparent; border-radius: 7px; padding: .3rem .6rem;
  color: var(--marron-suave); cursor: pointer; transition: background-color .18s, color .18s, border-color .18s; }
.rico__boton:hover { background: rgba(90,64,35,.06); color: var(--marron); }
.rico__boton--activo { background: var(--crema); border-color: var(--linea-fuerte); color: var(--marron); font-weight: 500; }
.rico__icono { font-size: 13px; line-height: 1; min-width: 1em; text-align: center; }

.rico__editor { font-family: Gilnger, Georgia, serif; font-size: 1.35rem; line-height: 1.25; letter-spacing: -0.01em;
  color: var(--oliva); padding: .75rem .9rem; min-height: 2.8em; outline: none; }
.rico__editor--largo { font-size: 1.15rem; min-height: 5em; }
/* El énfasis `*así*` del sitio hoy no cambia el color; en el editor se marca apenas para que no se pierda. */
.rico__editor em { font-style: normal; color: var(--marron); }
.rico__editor p { margin: 0 0 .6rem; }
.rico__editor p:last-child { margin-bottom: 0; }
.rico__editor ul { margin: 0 0 .6rem; padding-left: 1.2rem; }
.rico__editor li { margin-bottom: .2rem; }
.rico__editor:empty::before { content: attr(data-vacio); color: var(--marron-suave); opacity: .5; }

/* Renglones */
.lineas { display: flex; flex-direction: column; gap: .5rem; }
.linea { display: flex; gap: .5rem; align-items: center; }
.linea input { flex: 1; }

/* Interruptor */
.interruptor { display: flex; align-items: center; gap: .7rem; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruptor__pista { width: 42px; height: 24px; border-radius: 999px; background: var(--linea-fuerte);
  position: relative; transition: background-color .25s; flex-shrink: 0; }
.interruptor__pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform .25s; }
.interruptor input:checked + .interruptor__pista { background: var(--oliva); }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(18px); }
.interruptor input:focus-visible + .interruptor__pista { outline: 2px solid var(--mostaza); outline-offset: 2px; }

/* Opciones */
.opciones { display: flex; gap: .6rem; flex-wrap: wrap; }
.opcion { display: flex; align-items: center; gap: .5rem; padding: .45rem .85rem; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: 999px; cursor: pointer; font-size: 13.5px; transition: border-color .2s; }
.opcion:hover { border-color: var(--linea-fuerte); }
.opcion input { position: absolute; opacity: 0; }
.opcion:has(input:checked) { border-color: var(--oliva); background: rgba(90,64,35,.04); font-weight: 500; }
.opcion__muestra { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--linea); }

/* Imagen */
.imagen { display: flex; gap: 1rem; align-items: flex-start; }
.imagen__previa { width: 130px; aspect-ratio: 4/5; border-radius: 10px; overflow: hidden;
  background: var(--crema); flex-shrink: 0; display: grid; place-items: center;
  background-image: linear-gradient(45deg, var(--crema-hondo) 25%, transparent 25%, transparent 75%, var(--crema-hondo) 75%),
                    linear-gradient(45deg, var(--crema-hondo) 25%, transparent 25%, transparent 75%, var(--crema-hondo) 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.imagen__previa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imagen__vacia { font-size: 12px; color: var(--marron-suave); text-align: center; padding: .5rem; background: var(--crema); border-radius: 6px; }
.imagen__acciones { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.imagen__nueva { font-size: 12px; color: var(--ok); }
.imagen input[type=file] { display: none; }

/* Archivo (PDF) */
.archivo { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.archivo__actual { width: 100%; font-size: 13.5px; color: var(--marron-suave); }
.archivo__actual a { color: var(--oliva); text-decoration: underline; text-underline-offset: 3px; }
.archivo__actual--nuevo { color: var(--ok); }
.archivo input[type=file] { display: none; }

/* Video */
.video { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.video__actual { width: 100%; font-size: 13.5px; color: var(--marron-suave); }
.video__actual a { color: var(--oliva); text-decoration: underline; text-underline-offset: 3px; }
.video__actual--nuevo { color: var(--ok); }
.video__barra { width: 100%; height: 6px; border-radius: 999px; background: var(--crema-hondo); overflow: hidden; }
.video__relleno { height: 100%; width: 2%; background: var(--mostaza); transition: width .4s; }
.video__paso { width: 100%; font-size: 12.5px; color: var(--marron-suave); margin-top: -.2rem; }
.video input[type=file] { display: none; }

/* ---------------------------------------------------------- Listas */

.lista { display: flex; flex-direction: column; gap: .75rem; }
.item { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.item--arrastrando { opacity: .45; }
.item--sobre { border-color: var(--oliva); }
.item__cabecera { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; }
.item__asa { cursor: grab; color: var(--linea-fuerte); font-size: 15px; line-height: 1; padding: .2rem; flex-shrink: 0; }
.item__asa:active { cursor: grabbing; }
.item__resumen { flex: 1; text-align: left; background: none; border: 0; font: inherit; cursor: pointer;
  color: var(--marron); font-weight: 500; padding: 0; }
.item__numero { color: var(--marron-suave); opacity: .7; font-size: 12px; font-variant-numeric: tabular-nums; margin-right: .5rem; }
.item__oculto { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--marron-suave);
  background: var(--crema); padding: .15rem .5rem; border-radius: 999px; }
.item__cuerpo { padding: .3rem 1.1rem 1.1rem; border-top: 1px solid var(--linea); }
.item__pie { display: flex; justify-content: flex-end; }
.item__borrar { font: inherit; font-size: 13px; background: none; border: 0; color: var(--error);
  cursor: pointer; padding: .3rem .5rem; border-radius: 6px; }
.item__borrar:hover { background: rgba(178,80,42,.08); }
.lista__agregar { align-self: flex-start; margin-top: .25rem; }

/* ---------------------------------------------------------- Contactos */

.contactos__barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.contactos__total { font-size: 13.5px; color: var(--marron-suave); }
.contactos__vacio { color: var(--marron-suave); }
.contactos { width: 100%; border-collapse: collapse; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; font-size: 14px; }
.contactos th { text-align: left; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--marron-suave); padding: .7rem .9rem; border-bottom: 1px solid var(--linea); background: var(--crema-claro); }
.contactos td { padding: .65rem .9rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
.contactos tr:last-child td { border-bottom: 0; }
.contactos a { color: var(--oliva); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------- Barra */

.barra { position: fixed; bottom: 0; left: var(--nav); right: 0; height: var(--barra);
  background: rgba(250,247,242,.92); backdrop-filter: blur(12px); border-top: 1px solid var(--linea);
  display: flex; align-items: center; justify-content: space-between; padding: 0 3rem; gap: 1rem; z-index: 10; }
.barra__estado { font-size: 13.5px; color: var(--marron-suave); }
.barra__estado strong { color: var(--marron); font-weight: 500; }
.barra__acciones { display: flex; gap: .6rem; align-items: center; }

/* ---------------------------------------------------------- Aviso */

.aviso { position: fixed; bottom: calc(var(--barra) + 1.25rem); left: 50%; transform: translateX(-50%);
  background: var(--oliva); color: var(--crema); padding: .8rem 1.4rem; border-radius: 999px;
  box-shadow: var(--sombra); font-size: 14px; z-index: 20; max-width: 90vw; text-align: center; }
.aviso--error { background: var(--error); border-radius: 18px; }
.aviso--ok { background: var(--oliva); }
.aviso ul { margin: .4rem 0 0; padding-left: 1.1rem; text-align: left; font-size: 13px; }

/* ---------------------------------------------------------- Mobile */

@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .nav { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: .75rem; padding: 1rem; }
  .nav__lista { flex-direction: row; overflow-x: auto; flex-wrap: nowrap; width: 100%; padding-bottom: .25rem; }
  .nav__item { white-space: nowrap; font-size: 14px; }
  .nav__pie { flex-direction: row; border: 0; padding: 0; margin-left: auto; }
  .panel { padding: 1.5rem 1.25rem calc(var(--barra) + 2rem); }
  .barra { left: 0; padding: 0 1.25rem; }
  .barra__estado { display: none; }
  .barra__acciones { width: 100%; }
  .barra__acciones .btn { flex: 1; }
  .imagen { flex-direction: column; }
}