/* ==========================================================================
   Superficies de producto.

   Cada bloque de aqui reproduce, en HTML/CSS, una superficie que existe de
   verdad en el sistema: el area cliente, el correo de novedades, el
   inventario de fuentes, el ciclo de un item, el criterio de filtrado y la
   salud de cobertura. Cuando se ensena dentro de la pagina va marcado como
   REAL PRODUCT (estructura y datos reales) o EDITORIAL REPRESENTATION
   (misma estructura, recorte editorial para poder caber en pantalla).
   ========================================================================== */

/* ------------------------------------------------------------- ventana app */

.app {
  margin: 0; background: var(--paper);
  border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden;
}
.app-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  min-height: 44px; padding: 0 var(--s5);
  border-bottom: 1px solid var(--line); background: var(--ivory);
}
.app-bar .bar-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.app-bar .bar-glyph {
  width: 22px; height: 22px; border: 1px solid var(--navy); border-radius: 3px;
  display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--navy); flex: none;
}
.app-bar .bar-t { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.app-bar .bar-s { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.app-bar .bar-r { display: flex; align-items: center; gap: 8px; flex: none; }
.app-body { padding: var(--s6); }
.app-body.is-flush { padding: 0; }

/* barra de navegacion del area cliente (Hoy · Archivo · Buscador ...) */
.app-tabs {
  display: flex; align-items: center; gap: var(--s6);
  padding: 0 var(--s6); min-height: 46px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.app-tabs a { font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.app-tabs a:hover { color: var(--navy); }
.app-tabs a.is-here { color: var(--navy); font-weight: 500; }

/* lista de entregas de la vista Hoy / Archivo del area cliente */
.hoy-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s5); padding: 0 0 var(--s5); }
.hoy-head .h-t { margin: 0; font-size: 19px; font-weight: 400; color: var(--ink); }
.hoy-head .h-d { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hoy-cards { display: grid; gap: var(--s5); }
.deliv {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s5);
  align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line);
}
.deliv .d-t { margin: 0; font-size: 15.5px; color: var(--ink); }
.deliv .d-m { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-3); }
.deliv .d-n { font-size: 14px; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.deliv.is-quiet .d-n { color: var(--ink-3); }

/* --------------------------------------------------- inventario de fuentes */

.src-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s8); }
.src-family { padding: 14px 0; border-bottom: 1px solid var(--line); }
.src-family .f-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s5); }
.src-family .f-name { font-size: 15.5px; color: var(--ink); margin: 0; font-weight: 500; }
.src-family .f-n { font-size: 15.5px; color: var(--navy); font-variant-numeric: tabular-nums; font-weight: 500; }
.src-family .f-what { margin: 5px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.src-family .f-bar { display: flex; gap: 3px; margin-top: 9px; }
.src-family .f-bar i { height: 3px; background: var(--line-2); border-radius: 1px; flex: 1; }
.src-family .f-bar i.on { background: var(--navy); }
.src-family .f-bar i.on.is-eu { background: var(--teal); }
.src-family .f-bar i.on.is-ccaa { background: var(--gold); }

/* --------------------------------------------------------- ciclo del item */

.ev-rail { position: relative; margin: 0; padding: 4px 0 4px 26px; list-style: none; }
.ev-rail::before { content: ""; position: absolute; left: 5px; top: 12px; bottom: 12px; width: 1px; background: var(--line-2); }
.ev-step { position: relative; padding: 9px 0 13px; }
.ev-step::before {
  content: ""; position: absolute; left: -25px; top: 15px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line-2);
}
.ev-step.is-on::before { border-color: var(--navy); background: var(--navy); }
.ev-step.is-open::before { border-color: var(--teal); background: var(--teal); }
.ev-step.is-now::before { border-color: var(--gold); background: var(--gold); }
.ev-step .e-when { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ev-step .e-what { margin: 3px 0 0; font-size: 15px; color: var(--ink); }
.ev-step .e-why { margin: 3px 0 0; font-size: 13px; color: var(--ink-3); }

/* ------------------------------------------------------------- criterio -- */

/* hechos etiqueta / valor: la version densa de .data-list, para fichas de
   expediente y para cualquier superficie que muestre campos de un registro */
.c-facts { margin: 0; padding: 0; list-style: none; }
.c-facts li { display: flex; gap: var(--s5); padding: 11px 0; border-bottom: 1px solid var(--line); }
.c-facts .fa-k { flex: none; width: 116px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; }
.c-facts .fa-v { font-size: 15px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }

.criteria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); }
.crit-col h4 { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.crit-terms { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.crit-terms li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
.crit-terms li .t-hit { font-size: 11.5px; color: var(--teal); letter-spacing: .04em; white-space: nowrap; padding-top: 3px; flex: none; }
.crit-terms li .t-mute { color: var(--ink-3); }
.crit-foot { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: 6px var(--s5); font-size: 12.5px; color: var(--ink-3); }

/* --------------------------------------------------------- salud/cobertura */

.ops-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ops-list li { display: grid; grid-template-columns: minmax(0, 1.4fr) auto auto; gap: var(--s5); align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.ops-list .o-name { font-size: 14.5px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.ops-list .o-meta { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --------------------------------------------------------------- respuesta */

@media (max-width: 900px) {
  .c-facts li { flex-direction: column; gap: 3px; }
  .c-facts .fa-k { width: auto; }
  .src-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .criteria { grid-template-columns: minmax(0, 1fr); gap: var(--s6) 0; }
  .app-tabs { gap: var(--s5); padding: 0 var(--s5); }
  .app-body { padding: var(--s5); }
  .ops-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .ops-list .o-meta.is-extra { display: none; }
}

@media (max-width: 640px) {
  /* dos etiquetas en una barra estrecha se tocaban: la barra respira y pasa a
     dos lineas antes que solaparse. */
  .app-bar, .mail-head, .surface-bar {
    flex-wrap: wrap; gap: 4px var(--s5);
    padding-top: 9px; padding-bottom: 9px; min-height: 0;
  }
  .app-bar .bar-r { width: 100%; }
  .hoy-head { flex-wrap: wrap; gap: 4px var(--s5); }
  .mail-foot { flex-wrap: wrap; gap: 4px var(--s5); }
  .deliv { padding: 12px 0; }
}