/* Panel. Feo a propósito no, pero sí sobrio: aquí se trabaja.
   Mismos colores que la web para no cambiar de mundo al entrar. */
:root{
  --ink:#020B25; --ink-2:#414A66; --ink-3:#6E7691;
  --rule:#E1E5F0; --rule-soft:#EDEFF6; --bg:#F5F7FC;
  --blue:#003EFB; --blue-dk:#0031C8; --blue-tint:#EBF0FF;
  --verde:#0A7D42; --rojo:#B3261E; --ambar:#8A5A00;
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r:10px; --rs:6px;

  /* Estas tres se usaban sin estar definidas. Las que llevaban respaldo
     —var(--mono,monospace)— colaban; `var(--panel)` y `var(--hundido)`
     no, y el fondo de las miniaturas de la biblioteca salía transparente.
     Ahora las vigila una prueba: cero variables sin definir. */
  --panel:#FFFFFF;
  --blue-lite:#4D84FF;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55}
a{color:var(--blue)}
.envoltorio{max-width:72rem;margin:0 auto;padding:1.5rem 1.5rem 4rem}

/* ============================================================
   BARRA LATERAL — como en WordPress: la navegación a la izquierda y
   quieta. Con quince secciones un menú horizontal deja de caber.
   ============================================================ */
.con-barra{padding-left:15rem}
@media (max-width:900px){.con-barra{padding-left:0}}
.lateral{
  position:fixed;top:0;left:0;bottom:0;width:15rem;z-index:40;
  background:var(--ink);color:#C9D0E4;display:flex;flex-direction:column;
  overflow-y:auto;
}
@media (max-width:900px){
  .lateral{position:static;width:100%;height:auto;flex-direction:column}
}
.lateral .marca{
  display:block;padding:1.25rem 1.25rem 1rem;color:#fff;text-decoration:none;
  font-weight:800;letter-spacing:-.03em;font-size:1.0625rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.lateral .marca b{color:var(--blue-lite,#4D84FF)}
.lateral .marca span{display:block;font-size:.625rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#6E7899;margin-top:.15rem}

.menu{padding:.75rem 0;flex:1 1 auto}
.menu__titulo{
  margin:1rem 1.25rem .35rem;font-size:.625rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#5C6785;
}
.menu a{
  display:flex;align-items:center;gap:.6rem;padding:.5rem 1.25rem;
  color:#C9D0E4;text-decoration:none;font-size:.9375rem;font-weight:500;
  border-left:3px solid transparent;
}
.menu a:hover{background:rgba(255,255,255,.05);color:#fff}
.menu a.es-aqui{background:rgba(77,132,255,.16);color:#fff;border-left-color:#4D84FF;font-weight:700}
.menu .ico{flex:none;width:1.1rem;text-align:center;opacity:.75;font-size:.9rem}
.menu .cuenta,.menu .pastilla{
  margin-left:auto;font-style:normal;font-size:.6875rem;font-weight:700;
  padding:.1rem .45rem;border-radius:999px;background:rgba(255,255,255,.1);color:#A9B4CE;
}
.menu .pastilla{background:#4D84FF;color:#fff}

.lateral__pie{padding:1rem 1.25rem 1.25rem;border-top:1px solid rgba(255,255,255,.08)}
.btn--ancho{width:100%;justify-content:center}
.lateral__pie .quien{margin:.75rem 0 0;font-size:.75rem;color:#6E7899;line-height:1.5}
.lateral__pie .quien a{color:#A9B4CE}

/* botones */
.btn{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-weight:600;cursor:pointer;
  background:var(--blue);color:#fff;border:1px solid var(--blue);border-radius:100px;padding:.5rem 1.1rem;text-decoration:none}
.btn:hover{background:var(--blue-dk);border-color:var(--blue-dk)}
.btn[disabled]{opacity:.4;cursor:default}
.btn--fino{font-size:.8125rem;padding:.35rem .9rem}
.btn--claro{background:#fff;color:var(--ink);border-color:var(--rule)}
.btn--claro:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--peligro{background:#fff;color:var(--rojo);border-color:#E8C9C6}
.btn--peligro:hover{background:var(--rojo);border-color:var(--rojo);color:#fff}

/* avisos */
.aviso{margin:0 0 1rem;padding:.7rem 1rem;border-radius:var(--rs);font-size:.9375rem}
.aviso--ok{background:#E6F4EC;color:#0A5B32;border:1px solid #BFE3CF}
.aviso--mal{background:#FBEAE8;color:#7A1B15;border:1px solid #F0CBC7}

/* tarjetas y tablas */
.caja{background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:1.25rem}
.tabla{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.tabla th{text-align:left;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  padding:.7rem 1rem;border-bottom:1px solid var(--rule);background:#FBFCFE}
.tabla td{padding:.85rem 1rem;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.tabla tr:last-child td{border-bottom:0}
.tabla a.tit{font-weight:700;text-decoration:none;color:var(--ink)}
.tabla a.tit:hover{color:var(--blue)}
.sub{display:block;font-size:.8125rem;color:var(--ink-3);margin-top:.15rem}
/* Lo mismo pero para una CELDA de tabla: `.sub` es display:block y
   puesto en un <td> rompe la fila —las columnas se van cada una por su
   lado—. Pasaba en el registro, en artículos y en categorías. */
/* Una etiqueta pequeña al lado de un nombre: «apagado», «pendiente».
   Va en la hoja y no suelta dentro de una vista porque ya pasó una vez:
   una clase que solo existía en el `<style>` de una pantalla dejó otra
   con los números pegados. */
.etiq{display:inline-block;font-size:.6875rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:.15rem .45rem;border-radius:100px;
  background:var(--rule-soft);color:var(--ink-3);vertical-align:middle;margin-left:.35rem}
.etiq--mal{background:#FBEAE8;color:#7A1B15}
.etiq--bien{background:#E7F5EC;color:#1B6B3A}
.etiq--espera{background:#FCF2DD;color:#7A5410}

/* Una advertencia dentro de un campo: «ese formulario está apagado»,
   «el correo no está configurado». No es un error —lo que hay guardado
   es válido— pero si no se dice, se descubre cuando ya no sirve. */
.ojo{color:var(--ambar)}

td.apagado{font-size:.8125rem;color:var(--ink-3)}
td.apagado .sub{margin-top:0}
.acciones{display:flex;gap:.5rem;justify-content:flex-end}

.etq{display:inline-block;font-size:.6875rem;font-weight:700;padding:.15rem .55rem;border-radius:999px}
.etq--publicado{background:#E6F4EC;color:var(--verde)}
.etq--borrador{background:var(--rule-soft);color:var(--ink-3)}
.etq--programado{background:#FDF3E0;color:var(--ambar)}

/* formularios */
.campos{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.campo{display:block}
.campo--ancho{grid-column:1/-1}
.campo > span{display:block;font-size:.8125rem;font-weight:600;color:var(--ink-2);margin-bottom:.3rem}
.campo input[type=text],.campo input[type=email],.campo input[type=password],
.campo input[type=url],.campo input[type=datetime-local],.campo select,.campo textarea{
  width:100%;font:inherit;background:#fff;border:1px solid var(--rule);border-radius:var(--rs);padding:.55rem .75rem;color:var(--ink)}
.campo textarea{resize:vertical;line-height:1.6;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.875rem}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--blue);outline-offset:1px}
.campo small{display:block;margin-top:.25rem;font-size:.75rem;color:var(--ink-3)}
.fila-check{display:flex;align-items:center;gap:.5rem;font-size:.875rem}
.fila-check input{accent-color:var(--blue);width:1rem;height:1rem}

/* editor a dos columnas */
.editor{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:1100px){.editor{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}
.editor__lado{position:sticky;top:1.5rem;align-self:start}
.md{min-height:32rem}
.previa{background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:1.25rem;max-height:38rem;overflow:auto}
.previa h2{font-size:1.1rem;margin:1.2rem 0 .4rem}
.previa h3{font-size:1rem;margin:1rem 0 .3rem}
.previa p{margin:0 0 .8rem;font-size:.9375rem;color:var(--ink-2)}
.previa table{width:100%;border-collapse:collapse;font-size:.8125rem;margin:0 0 .8rem}
.previa th,.previa td{border:1px solid var(--rule);padding:.35rem .5rem;text-align:left}
.previa blockquote{margin:0 0 .8rem;padding-left:.9rem;border-left:3px solid var(--blue);color:var(--ink-2)}
.previa__cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.previa__cab b{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

.barra-editor{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:1.25rem;
  background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:.85rem 1rem}
.barra-editor .der{margin-left:auto;display:flex;gap:.6rem;align-items:center}
h1{font-size:1.5rem;letter-spacing:-.02em;margin:0 0 1.25rem}
.cabecera-lista{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem}
.cabecera-lista h1{margin:0}
.cabecera-lista .btn{margin-left:auto}
.vacio{padding:2.5rem;text-align:center;color:var(--ink-3);background:#fff;border:1px dashed var(--rule);border-radius:var(--r)}

/* login */
.entrar{max-width:24rem;margin:4rem auto}
.entrar .campos{grid-template-columns:minmax(0,1fr)}

/* ---------- Inventario ---------- */
.intro-inv{max-width:60ch;margin:-.5rem 0 1.5rem;color:var(--ink-2)}
.cifras{display:grid;gap:.75rem;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:1.5rem}
@media (min-width:900px){.cifras{grid-template-columns:repeat(5,minmax(0,1fr))}}
.cifra{background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:.9rem 1rem}
.cifra b{display:block;font-size:1.75rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.cifra b small{font-size:1rem;font-weight:700;color:var(--ink-3);letter-spacing:0}
.cifra span{display:block;margin-top:.3rem;font-size:.8125rem;line-height:1.4;color:var(--ink-3)}
/* El cuello de botella del proyecto va marcado, no escondido */
.cifra--ojo{border-color:transparent;box-shadow:0 0 0 1.5px var(--blue)}
.cifra--ojo b{color:var(--blue)}

.saltos{display:flex;gap:1.25rem;margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:1px solid var(--rule)}
.saltos a{font-weight:600;text-decoration:none;font-size:.9375rem}

.bloque-inv{margin-bottom:2.5rem;scroll-margin-top:1.5rem}
.bloque-inv__cab{display:flex;align-items:center;gap:1rem;margin-bottom:.9rem}
.bloque-inv__cab h2{margin:0;font-size:1.1875rem;letter-spacing:-.02em}
.bloque-inv__cab .btn{margin-left:auto}
.grupo{margin:1.5rem 0 .5rem;font-size:.6875rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.tabla--inv td{vertical-align:middle}
.tabla--inv .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.ruta{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem;color:var(--ink-2);
  background:var(--rule-soft);border-radius:4px;padding:.1rem .35rem}
.etq--tipo{background:var(--blue-tint);color:var(--blue-dk);margin-left:.35rem}
.pie-tabla{margin:.75rem 0 0;font-size:.8125rem;color:var(--ink-3);max-width:70ch}

/* ---------- Editor por tipos ---------- */
.caja--grupo{margin-top:1.25rem}
.grupo-campos{
  margin:0 0 1rem;font-size:.6875rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);padding-bottom:.6rem;border-bottom:1px solid var(--rule-soft);
}
.caja--grupo .campos{grid-template-columns:minmax(0,1fr)}

/* Listas repetibles: entregables, pasos, FAQs… */
.lista{border:1px solid var(--rule);border-radius:var(--rs);padding:1rem;background:#FBFCFE}
.lista__lbl{display:block;font-size:.8125rem;font-weight:700;color:var(--ink-2)}
.lista__ayuda{display:block;margin:.2rem 0 .75rem;font-size:.75rem;color:var(--ink-3);line-height:1.45}
.lista__filas{display:flex;flex-direction:column;gap:.6rem;margin-bottom:.75rem}
.lista__fila{display:flex;gap:.6rem;align-items:flex-start;background:#fff;border:1px solid var(--rule);border-radius:var(--rs);padding:.6rem}
.lista__num{
  flex:none;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--rule-soft);
  color:var(--ink-3);font-size:.75rem;font-weight:700;display:grid;place-items:center;margin-top:.15rem;
}
.lista__campos{flex:1 1 auto;min-width:0;display:grid;gap:.5rem}
.lista__campos input,.lista__campos textarea{
  width:100%;font:inherit;font-size:.9375rem;border:1px solid var(--rule);border-radius:var(--rs);padding:.45rem .6rem;color:var(--ink)
}
.lista__campos textarea{resize:vertical;line-height:1.5}
.lista__campo em{display:block;font-style:normal;font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.2rem}
/* La imagen de una fila de lista: miniatura + desplegable. No lleva la
   galería grande porque en una guía de doce herramientas serían doce
   galerías de cuarenta miniaturas en la misma pantalla. Se sube en
   Medios, que es donde se suben todas, y aquí se elige. */
.lista__buscar{margin:.7rem 0 0;padding-top:.7rem;border-top:1px dashed var(--rule)}

.lista__buscar small{display:block;margin-top:.35rem;font-size:.75rem;color:var(--ink-3);line-height:1.5}

.lista__datos-dice{display:block;margin-top:.4rem;font-size:.8125rem;color:var(--ink-2)}

.lista__datos-dice.mal{color:var(--rojo)}

.lista__datos-dice.bien{color:var(--verde)}

.lista__medio{display:flex;align-items:center;gap:.5rem}

.lista__medio select{min-width:0;flex:1}

.lista__medio-previa{
  flex:none;width:2rem;height:2rem;border:1px solid var(--rule);border-radius:var(--rs);
  background:var(--rule-soft);display:grid;place-items:center;overflow:hidden;
}

.lista__medio-previa img{width:100%;height:100%;object-fit:contain}

.lista__quitar{
  flex:none;border:1px solid var(--rule);background:#fff;color:var(--ink-3);cursor:pointer;
  width:1.75rem;height:1.75rem;border-radius:var(--rs);font-size:1rem;line-height:1;
}
.lista__quitar:hover{border-color:var(--rojo);color:var(--rojo)}

/* Cuánto lleva relleno un contenido */
.barra-relleno{width:6rem;height:.4rem;background:var(--rule-soft);border-radius:999px;overflow:hidden}
.barra-relleno i{display:block;height:100%;background:var(--blue);border-radius:999px}

/* Campo de relación: elegir contenidos de otro tipo.
   Casillas en rejilla, no un <select multiple>: con un select hay que
   saber que se elige con Ctrl y no se ve de un vistazo qué hay marcado. */

.relacion{
  display:grid;gap:.4rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));
  max-height:19rem;overflow-y:auto;
  padding:.65rem;border:1px solid var(--rule,#DDE1EC);border-radius:8px;background:#fff;
}

.relacion__op{
  display:flex;align-items:flex-start;gap:.55rem;
  padding:.4rem .55rem;border-radius:6px;cursor:pointer;
}

.relacion__op:hover{background:var(--blue-tint,#EBF0FF)}

.relacion__op input{margin-top:.15rem;flex:none;accent-color:var(--blue,#003EFB)}

.relacion__op b{font-weight:600;font-size:.875rem;line-height:1.35}

.relacion__aviso{
  display:block;font-style:normal;font-size:.6875rem;
  color:var(--ink-3,#8A90A6);margin-top:.1rem;
}

/* El botón de borrar va el ÚLTIMO en el HTML y el primero a la vista.
   Al pulsar Intro dentro de un campo, el navegador dispara el PRIMER
   botón de enviar del formulario: con «Borrar» ahí, escribir un título
   y darle a Intro preguntaba si borrar la página. Se dibuja donde
   siempre, pero deja de ser el botón por defecto. */
.barra-editor .der .btn--peligro{order:-1;margin-right:auto}

/* ---------- El botón de Crear del lateral ----------
   Es la acción principal del panel y tiene que verse como tal: antes
   heredaba el estilo de enlace suelto y salía subrayado y saliéndose. */
.crear-btn{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  margin:0 .85rem 1rem;padding:.6rem .9rem;
  background:var(--blue);color:#fff;border-radius:var(--rs);
  font-size:.9375rem;font-weight:650;text-decoration:none;
  transition:background .12s;
}
.crear-btn:hover{background:var(--blue-dk)}
.crear-btn span{font-size:1.05rem;line-height:1;font-weight:400}

/* ============================================================
   BARRA DE ARRIBA
   Lo que hay que tener siempre a la vista, no enterrado en una
   pantalla: crear, si la web está abierta o cerrada, y los avisos
   que no pueden esperar. Que la web esté cerrada es lo más fácil
   de olvidar y lo más caro — se publica durante semanas y no lo ve
   nadie.
   ============================================================ */
.superior{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.55rem 1.5rem;
  background:var(--panel);border-bottom:1px solid var(--rule);
}
.superior__hueco{flex:1 1 auto}
.superior a{text-decoration:none}

.superior__crear{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.4rem .85rem;border-radius:var(--rs);
  background:var(--blue);color:#fff;font-weight:650;font-size:.875rem;
  transition:background .12s;
}
.superior__crear:hover{background:var(--blue-dk)}
.superior__crear span{font-size:1rem;line-height:1;font-weight:400}

.superior__estado{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem .7rem;border-radius:99px;
  font-size:.8125rem;font-weight:600;border:1px solid var(--rule);color:var(--ink-2);
}
.superior__estado .punto{width:.5rem;height:.5rem;border-radius:50%;flex:none}
.superior__estado--cerrada{background:#FFF4E5;border-color:#F0D9B5;color:var(--ambar)}
.superior__estado--cerrada .punto{background:var(--ambar)}
.superior__estado--abierta{background:#E7F5EE;border-color:#BFE3D0;color:var(--verde)}
.superior__estado--abierta .punto{background:var(--verde)}

.superior__aviso{
  padding:.35rem .7rem;border-radius:99px;font-size:.8125rem;font-weight:600;
  background:#FDECEA;color:var(--rojo);border:1px solid #F3C9C4;
}
/* La caja del interruptor de «ver los huecos»: se distingue del resto
   porque enciende algo que se ve en la web de verdad. */
.caja--test{border-left:4px solid var(--ambar);margin-bottom:1.25rem}
.caja--test form{margin-top:.7rem;display:flex;align-items:center;flex-wrap:wrap}
.rojo{color:var(--rojo)}
.verde{color:var(--verde)}

.superior__ver{font-size:.8125rem;font-weight:600;color:var(--ink-2)}
.superior__ver:hover{color:var(--blue)}
/* Los dos van juntos arriba a la derecha, separados por una raya: son
   dos cosas distintas —mirar tu web y tocarla— y antes eran un botón
   solo que decía las dos. */
.superior__ver--ver{margin-right:.75rem;padding-right:.75rem;border-right:1px solid var(--rule)}

@media (max-width:900px){ .superior{padding:.55rem 1rem} }


/* La tira de números de arriba de una pantalla. Vivía dentro del <style>
   del registro, y el mapa web la usaba también: allí no se aplicaba
   nada y los números salían pegados unos a otros en una línea. El
   <style> de una vista solo existe en esa vista; lo que usan dos van
   aquí. */
.reg-resumen{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:baseline;
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);
  padding:.9rem 1.1rem;margin-bottom:1rem}
.reg-resumen strong{font-size:1.25rem;letter-spacing:-.02em}

/* ============================================================
   CLASES QUE SE USABAN SIN EXISTIR
   Estas cinco salían en el HTML de varias pantallas y no estaban
   definidas en ninguna parte: el navegador se las come sin decir
   nada y el texto queda como texto normal. Las explicaciones en
   gris de Ajustes, Medios, Sistema y Estado de la web llevaban
   meses saliendo como párrafos corrientes. La prueba de abajo
   —«toda clase usada tiene que existir»— es para que no vuelva a
   colarse una.
   ============================================================ */

/* Texto de apoyo: lo mismo que .intro-inv, con otros nombres que ya
   estaban puestos por las vistas. */
.ayuda{max-width:60ch;color:var(--ink-3);font-size:.8125rem;line-height:1.55}
.entradilla{max-width:60ch;margin:-.5rem 0 1.5rem;color:var(--ink-2)}

/* Un recuadro vacío con borde discontinuo, para «aquí todavía no hay
   nada». Igual que .vacio pero dentro de una lista. */
.hueco{display:block;padding:1.2rem;text-align:center;color:var(--ink-3);
  background:#fff;border:1px dashed var(--rule);border-radius:var(--r)}
.hueco--via{border-style:dashed;border-color:var(--rule-soft)}

/* Botón grande, para la acción principal de una pantalla. */
.btn--lg{font-size:1rem;padding:.7rem 1.6rem}

/* La caja donde se pega texto con formato. Se lee como se leerá
   luego en la web: párrafos con aire y títulos que destacan. */
.prose{line-height:1.6;color:var(--ink)}
.prose p{margin:0 0 .8rem}
.prose h2,.prose h3{margin:1.2rem 0 .5rem;font-weight:700;letter-spacing:-.01em}
.prose h2{font-size:1.1rem}
.prose h3{font-size:1rem}
.prose ul,.prose ol{margin:0 0 .8rem;padding-left:1.3rem}
.prose li{margin:.2rem 0}
.prose a{color:var(--blue)}


/* El semáforo de los enlaces rotos. Un enlace roto es una visita que se
   va, así que se dice en dos sitios: en el menú lateral, al lado de
   «Estructura web» —en rojo, que ahí el resto de chinchetas son azules—,
   y arriba en la barra, donde el estilo de aviso ya es rojo de serie. */
.menu .pastilla--mal{background:var(--rojo)}

/* EL CONTADOR DE CARACTERES del título y la descripción de Google.
   No es un adorno: sesenta caracteres es donde Google corta el título y
   ciento cincuenta y cinco donde corta la descripción, y escribirlos a
   ciegas es como se publican títulos partidos por la mitad. */
.cuenta{font-variant-numeric:tabular-nums;color:var(--ink-3)}
.cuenta--pasa{color:#B23A0B;font-weight:700}

/* ── VER LA WEB ───────────────────────────────────────────────────
   La página publicada dentro del panel. El marco ocupa lo que le
   sobra a la ventana para que se vea página, no cromo. */
.ver{display:flex;flex-direction:column;gap:.75rem}
.ver__barra{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.ver__barra select{max-width:26rem}
.ver__url{
  font-family:var(--mono);font-size:.75rem;color:var(--ink-3);
  background:var(--bg);border:1px solid var(--rule);border-radius:var(--rs);
  padding:.35rem .6rem;
}
.ver__tam{display:flex;gap:.25rem;margin-left:auto}
.ver__tam button{
  font:inherit;font-size:.8125rem;font-weight:600;cursor:pointer;
  background:transparent;color:var(--ink-3);
  border:1px solid var(--rule);border-radius:var(--rs);padding:.35rem .7rem;
}
.ver__tam button.es-activo{background:var(--ink);color:#fff;border-color:var(--ink)}
.ver__pista{margin:0;font-size:.8125rem;color:var(--ink-3)}
.ver__pista strong{color:var(--ink)}
.ver__marco{
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
  background:#fff;margin-inline:auto;width:100%;
  height:calc(100vh - 13rem);min-height:32rem;
  transition:max-width .25s cubic-bezier(.23,1,.32,1);
}
.ver__marco iframe{display:block;width:100%;height:100%;border:0}

/* El selector de qué página se está viendo. */
.ver__ir{display:flex;align-items:center}

/* Para lo que tiene que leerse en voz alta pero no verse —la etiqueta de
   ese selector—. Con display:none desaparecería también para quien usa un
   lector de pantalla, que es justo a quien va dirigida. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Los campos de una plantilla, por secciones. La home declara 156: en
   una lista seguida es una columna de casillas por la que nadie baja. */
.grupo-campo{border:1px solid var(--rule);border-radius:8px;margin-bottom:.5rem;background:#fff}
.grupo-campo > summary{
  cursor:pointer;padding:.7rem .9rem;font-size:.9375rem;list-style:none;
  display:flex;gap:.6rem;align-items:baseline;
}
.grupo-campo > summary::-webkit-details-marker{display:none}
.grupo-campo > summary::before{content:"▸";color:var(--ink-3);font-size:.8rem}
.grupo-campo[open] > summary::before{content:"▾"}
.grupo-campo > summary span{color:var(--ink-3);font-size:.8125rem}
.grupo-campo > summary:hover{background:var(--bg)}
.grupo-campo > .campos{padding:0 .9rem .9rem}
.grupo-campo__t{font-size:.9375rem;margin:1.25rem 0 .5rem}

/* Un grupo del menú con sus cosas dentro. «Prueba social» son dos
   pantallas —lo que dicen tus clientes y quiénes son— y sueltas en el
   menú parecían dos asuntos que no tienen nada que ver. */
.menu__grupo > summary{
  display:flex;align-items:center;gap:.6rem;cursor:pointer;list-style:none;
  padding:.5rem .75rem;border-radius:6px;font-size:.875rem;color:#B9C0D6;
}
.menu__grupo > summary::-webkit-details-marker{display:none}
.menu__grupo > summary::after{content:"▸";margin-left:auto;font-size:.7rem;opacity:.7}
.menu__grupo[open] > summary::after{content:"▾"}
.menu__grupo > summary:hover{background:rgba(255,255,255,.06);color:#fff}
.menu__grupo > a{padding-left:2.4rem}

/* LA LISTA DE ENCARGOS.
   Vive en dos pantallas —debajo de «Crear» y en Encargos— y por eso está
   aquí y no en un <style> dentro de una vista: una de las dos se
   quedaría sin estilos el día que se toque la otra, que es justo lo que
   pasó. */
.encargos{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.encargo{display:grid;grid-template-columns:1fr auto auto;gap:.75rem;align-items:center;
  padding:.7rem .9rem;border:1px solid var(--rule);border-radius:.6rem;background:#fff}
.encargo__que strong{display:inline;font-size:.95rem}
.encargo__tipo{display:block;font-size:.8rem;color:var(--ink-3)}
.encargo__cura{display:block;font-size:.8rem;color:var(--ink-3)}
.encargo__estado{text-align:right;white-space:nowrap}
.encargo__estado small{display:block;font-size:.75rem;color:var(--ink-3)}
.encargo__ir{display:flex;gap:.6rem;font-size:.85rem;white-space:nowrap}
.encargo__ir form{margin:0}
.paso{font-size:.85rem;font-weight:600}
.paso--hecho{color:var(--ink-2)}
.paso--hay{color:var(--blue)}
.et{display:inline-block;font-size:.7rem;padding:.05rem .4rem;border-radius:.6rem;
  border:1px solid var(--rule);color:var(--ink-3);vertical-align:.1em}
.et--cura{border-color:var(--blue);color:var(--blue)}
.vacio-enc,.mas-enc{font-size:.9rem;color:var(--ink-2);margin:.75rem 0 0}

/* Por qué llega o por qué no. Lo que te espera a ti y lo que está roto
   se ven distinto: no es lo mismo «va por la mitad» que «pone que está
   lista y no hay ni una línea escrita». */
.encargo__pega{display:block;font-size:.8rem;color:#7A1B15}
.encargo__por{display:block;font-size:.85rem;color:var(--ink-2);line-height:1.5;margin-top:.15rem}
.encargo__por--listo,.encargo__por--tuya{color:var(--blue);font-weight:600}
.encargo__por--mal{color:#7A1B15}

/* «Escribiendo el informe…»: ocupa el sitio del botón que todavía no
   puede salir, para que se vea que la tarea está viva y no que falta
   algo. Sin botón y sin nada, la fila parece rota. */
/* LO QUE ESTÁ EN MARCHA, ARRIBA DE SU PROPIA LISTA.
   Vive dentro de «Entradas del blog» y no en una pantalla aparte, así
   que tiene que leerse como una sección de esa pantalla: separada de la
   tabla de abajo, pero sin parecer otra página. */
.en-marcha{margin-bottom:1.75rem}

.en-marcha h2{font-size:1rem;margin:1.25rem 0 .35rem}

.en-marcha h2:first-child{margin-top:0}

.lista-h2{font-size:1rem;margin:1.5rem 0 .6rem;padding-top:1.25rem;border-top:1px solid var(--rule)}

.encargo__aun{
  display:inline-flex;align-items:center;font-size:.8rem;color:var(--ink-3);
  font-style:italic;white-space:nowrap;
}
.encargo--mal{border-color:#F0CBC7}
.encargo--listo,.encargo--tuya{border-color:var(--blue)}

@media (max-width:40rem){
  .encargo{grid-template-columns:1fr;gap:.35rem}
  .encargo__estado{text-align:left}
}

/* `hidden` TIENE QUE OCULTAR, SIEMPRE.
   El atributo del navegador pone display:none, pero cualquier regla
   nuestra con más peso —un .campo{display:flex}, por ejemplo— se lo
   come, y entonces algo marcado como oculto se ve igual. Pasó con el
   editor: el lector y el cuadro de texto salían los dos a la vez. */
[hidden]{display:none !important}

/* EL LECTOR DEL ARTÍCULO.
   Revisar 27.000 caracteres en un cuadro de texto plano no es revisar:
   es mirar código. Para decidir si un texto está bien hay que leerlo
   como lo va a leer quien entre en la web. */
.articulo{position:relative}
.articulo__cab{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.articulo__largo{font-size:.78rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.pestanas{display:inline-flex;gap:.25rem;background:#F1F4FA;border-radius:100px;padding:.2rem}
.pestana{font:inherit;font-size:.85rem;font-weight:600;color:var(--ink-3);background:none;border:0;
  cursor:pointer;padding:.35rem 1rem;border-radius:100px}
.pestana--puesta{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(16,24,48,.08)}
.hoja{border:1px solid var(--rule);border-radius:.6rem;overflow:hidden;background:#fff}
.hoja iframe{display:block;width:100%;height:36rem;border:0}

/* Un diálogo para lo que se consulta, no para lo que se edita a diario. */
.informe-fila{display:flex;flex-direction:column;gap:.35rem;align-items:flex-start}
.dialogo{border:0;border-radius:.75rem;padding:0;width:min(46rem,92vw);max-height:86vh;
  box-shadow:0 24px 64px rgba(16,24,48,.28)}
.dialogo::backdrop{background:rgba(16,24,48,.45)}
.dialogo__cab{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.25rem;border-bottom:1px solid var(--rule);position:sticky;top:0;background:#fff}
.dialogo__cuerpo{padding:1.25rem;overflow:auto;max-height:52vh}
.dialogo__editar{border-top:1px solid var(--rule);padding:1rem 1.25rem}
.dialogo__editar summary{cursor:pointer;font-size:.8125rem;font-weight:600;color:var(--ink-2)}
.dialogo__editar textarea{width:100%;margin-top:.6rem}
.lectura{font-size:.95rem;line-height:1.65;color:var(--ink)}
.lectura h1,.lectura h2,.lectura h3{margin:1.4em 0 .5em;line-height:1.25}
.lectura h1{font-size:1.35rem}
.lectura h2{font-size:1.1rem}
.lectura h3{font-size:.98rem}
.lectura p,.lectura ul,.lectura ol{margin:0 0 1em}
.lectura li{margin-bottom:.3em}
.lectura table{border-collapse:collapse;width:100%;font-size:.88rem;margin:0 0 1em}
.lectura th,.lectura td{border:1px solid var(--rule);padding:.45rem .6rem;text-align:left}
.lectura blockquote{margin:0 0 1em;padding-left:1rem;border-left:3px solid var(--rule);color:var(--ink-2)}

/* «Ha llegado algo». Un aviso pequeño abajo, que no recarga ni
   interrumpe: si estás escribiendo, una recarga se lleva por delante lo
   que llevas escrito. */
.llegado{position:fixed;right:1.25rem;bottom:1.25rem;z-index:60;display:flex;align-items:center;gap:.75rem;
  background:var(--ink);color:#fff;padding:.7rem 1rem;border-radius:.6rem;font-size:.875rem;
  box-shadow:0 12px 32px rgba(16,24,48,.28);max-width:min(26rem,90vw)}
.llegado a{color:#9EC2FF;font-weight:600;text-decoration:none;white-space:nowrap}
.llegado a:hover{text-decoration:underline}
.llegado button{background:none;border:0;color:#A9B4CE;font-size:1.1rem;line-height:1;cursor:pointer;padding:0}


/* ============================================================
   LAS FOTOS DE UN TEXTO LARGO
   Los sitios de foto que propone el Sistema SEO dentro de una ficha o
   de un recurso. Van pegados debajo del texto al que pertenecen, no en
   un apartado aparte: lo que se está mirando es ese texto.
   ============================================================ */

.fotos-texto{
  border:1px solid var(--rule);border-left:3px solid var(--blue);
  border-radius:.6rem;background:#F7F9FF;padding:.9rem 1.1rem;margin:-.4rem 0 .5rem;
}

.fotos-texto__cab{margin:0 0 .7rem;font-size:.875rem;color:var(--ink-2)}

.fotos-texto__faltan{color:#B25E00;font-weight:700}

.fotos-texto__una + .fotos-texto__una{
  margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--rule);
}

.fotos-texto .campo{margin-top:.5rem}

/* UN CAMPO QUE NO VALE TIENE QUE VERSE QUE NO VALE.
   Nació con las redes sociales: cuatro de las cinco apuntaban a su
   propia página de contacto y el panel las enseñaba como cualquier otra
   casilla rellena. Un panel que enseña un error con la misma cara que
   un acierto no está avisando de nada. */
.campo--mal input{border-color:#D9534F;background:#FFF7F6}

.campo--mal > span{color:#7A1B15}

.aviso-mal{
  display:block;margin-top:.35rem;color:#7A1B15;font-size:.8125rem;line-height:1.45;
}

.aviso-mal b{font-weight:700}