/* ==========================================================================
   Go On Camiones — presentacion.css (capa 3 de 3)
   --------------------------------------------------------------------------
   Lo que antes solo se veía en el modo presentación. La página ya no lo
   activa (sin tecla P, botones ni consola), pero esta hoja se queda porque
   OCULTA cosas: si se quita, aparecen en pantalla.

   Contrato:
     <div data-capa="ya_opera:inventario-diario se_construye:sello-go-on">  distintivos ocultos
     class="solo-presentacion"        siempre oculto (p. ej. la medición de la tarjeta)
     class="oculto-en-presentacion"   siempre visible
   Los datos por confirmar (GOON_HECHOS_META.por_confirmar) no se ven: nucleo.js
   les pone la clase es-por-confirmar y los oculta.
   ========================================================================== */

html:not(.modo-presentacion) .solo-presentacion { display: none !important; }
.modo-presentacion .oculto-en-presentacion { display: none !important; }

/* --------------------------------------------------------------------------
   Distintivos por bloque
   -------------------------------------------------------------------------- */
:where(.tiene-capa) { position: relative; }
.distintivos { display: none; }
.modo-presentacion .distintivos {
  position: static; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px;
  margin: 0 0 10px; max-width: 100%; grid-column: 1 / -1; flex-basis: 100%; pointer-events: none;
}
.modo-presentacion [data-capa-pos="dentro"] > .distintivos,
.modo-presentacion .portada__foto > .distintivos,
.modo-presentacion .seccion__fondo > .distintivos,
.modo-presentacion .tarjeta__media > .distintivos {
  position: absolute; top: 8px; left: 8px; z-index: 40; margin: 0; max-width: calc(100% - 16px);
}
.modo-presentacion .tarjeta__media > .distintivos { top: auto; bottom: 8px; }
.modo-presentacion .portada__foto > .distintivos { top: calc(var(--alto-cabecera) + 12px); left: var(--go-sp-gutter); }
.modo-presentacion [data-capa-pos="arriba"] > .distintivos {
  position: absolute; top: -6px; left: -4px; z-index: 40; margin: 0;
  transform: translateY(-100%); max-width: calc(100% + 8px);
}
.distintivo {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 5px 9px;
  background: var(--go-noche); color: var(--go-blanco); border: 1px solid;
  font: 600 0.75rem/1.3 var(--go-font-body); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  max-width: 100%;
}
.distintivo b {
  font: 800 0.6875rem/1.3 var(--go-font-display); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
}
.distintivo--ya_opera { border-color: var(--go-verde); }
.distintivo--ya_opera b { color: var(--go-verde); }
.distintivo--se_construye { border-color: var(--go-ambar); }
.distintivo--se_construye b { color: var(--go-ambar); }
.distintivo--ilustrativo { border-color: var(--go-magenta); }
.distintivo--ilustrativo b { color: var(--go-magenta); }

.modo-presentacion .tiene-capa { outline: 1px dashed rgba(245, 166, 35, 0.65); outline-offset: 4px; }
.modo-presentacion .capa--ya_opera { outline-color: rgba(74, 222, 128, 0.75); }
.modo-presentacion .capa--ilustrativo { outline-color: rgba(224, 166, 245, 0.75); }
.modo-presentacion .portada__foto.tiene-capa,
.modo-presentacion .seccion__fondo.tiene-capa { outline: 0; }
.modo-presentacion .es-por-confirmar { outline: 1px dotted var(--go-por-confirmar); outline-offset: 2px; }

/* Celular: distintivos a 13 px. La foto de portada: su «Fig. 00» baja al pie
   para que el distintivo de arriba no lo tape. */
@media (max-width: 599.98px) {
  .distintivo, .distintivo b { font-size: var(--go-texto-legal); }
  .modo-presentacion .portada__pie { top: auto; bottom: 10px; }
  .modo-presentacion .portada__contenido { padding-bottom: 56px; }
}
@media print {
  .distintivos { display: none !important; }
}