/* ============================================================================
   Distintivo «Ficha de ejemplo»
   ----------------------------------------------------------------------------
   Un solo archivo, cargado por template.php Y por template_carta.php.

   ⚠ La carta digital NO carga style.css (a propósito: es una página que se
     abre desde un QR y tiene que pesar lo mínimo), así que si estas reglas
     vivieran en style.css el distintivo se vería distinto allí. Duplicarlas
     tampoco vale: acabarían diciendo cosas distintas. Por eso van en su propio
     archivo, que cargan los dos.

   ⚠ Gotcha #1: la regla legacy `.content span` de style.css tiene
     especificidad altísima y le mete `padding-bottom:12px` a cualquier <span>
     nuevo. De ahí los `!important` y el selector reforzado `.content span.…`.

   Contraste: texto #6d4f0c sobre fondo #fdf4dc ≈ 8:1. El dorado de marca con
   texto blanco encima NO vale (ya documentado en CLAUDE.md), así que aquí va
   al revés: fondo claro y letra oscura.
   ========================================================================== */

.eb-demo-badge,
.content span.eb-demo-badge{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px !important;
	margin: 0 !important;
	border-radius: 999px;
	background: #fdf4dc;
	border: 1px solid #e3c473;
	color: #6d4f0c;
	font-size: 11px !important;
	line-height: 1 !important;
	font-weight: 700;
	white-space: nowrap;
	vertical-align: middle;
	cursor: help;
}

/* El <span> del texto va dentro del anterior: también le llega el gotcha #1. */
.eb-demo-badge > span,
.content span.eb-demo-badge > span{
	padding: 0 !important;
	margin: 0 !important;
	font-size: inherit !important;
	line-height: 1 !important;
	color: inherit;
}

.eb-demo-badge svg{
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	color: #a97f16;
}

/* En la ficha, la píldora va acompañada de la explicación entera: es donde de
   verdad se decide si alguien coge el coche para ir a cenar. */
.eb-demo-wrap{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding: 10px 12px;
	background: #fdf4dc;
	border: 1px solid #e3c473;
	border-left: 3px solid #c9a13c;
	border-radius: 10px;
}

/* Dentro del recuadro la píldora no repite el fondo: quedaría una caja dentro
   de otra del mismo color. */
.eb-demo-wrap .eb-demo-badge,
.content .eb-demo-wrap span.eb-demo-badge{
	background: #f6e6bb;
	border-color: #d9b862;
}

.eb-demo-text,
.content span.eb-demo-text{
	flex: 1 1 200px;
	min-width: 0;
	padding: 0 !important;
	margin: 0 !important;
	color: #6d4f0c;
	font-size: 13px !important;
	line-height: 1.45 !important;
	font-weight: 400;
}

/* A 360 y a 320 el texto se pone debajo de la píldora en vez de espachurrarse
   en una columna de cuatro palabras. */
@media (max-width: 480px){
	.eb-demo-wrap{ gap: 6px; padding: 9px 10px; }
	.eb-demo-text,
	.content span.eb-demo-text{ flex: 1 1 100%; font-size: 12.5px !important; }
}

/* La carta digital se mira de noche y tiene modo oscuro. Sin esto, el
   distintivo sería un cuadro blanco cegando en mitad de la página. */
@media (prefers-color-scheme: dark){
	.eb-demo-badge,
	.content span.eb-demo-badge{
		background: #3a3016;
		border-color: #7a6528;
		color: #f2dfa6;
	}
	.eb-demo-badge svg{ color: #d8bc68; }
	.eb-demo-wrap{
		background: #332b14;
		border-color: #6b5822;
		border-left-color: #a98c31;
	}
	.eb-demo-wrap .eb-demo-badge,
	.content .eb-demo-wrap span.eb-demo-badge{
		background: #443917;
		border-color: #7a6528;
	}
	.eb-demo-text,
	.content span.eb-demo-text{ color: #f2dfa6; }
}