/* ============================================================
   plantillas.css — Estilos específicos de las 6 plantillas de
   diploma.  Este archivo NO sigue la regla de neutralidad: es
   el producto decorativo final que el alumno se lleva a casa.
   Cada plantilla es visualmente distinta (composición, bordes,
   ornamentación) y reacciona a:
     - data-color-principal (color dominante, editable)
     - data-orientacion (horizontal|vertical)
     - data-tipografia-nombre (fuente del nombre)
   ============================================================ */

/* ====== Contenedor base del diploma ====== */
.diploma {
  --dp-color: #1a4d8f;
  --dp-color-claro: #5a8dcf;
  --dp-color-oscuro: #133a6e;
  --dp-color-fondo: #ffffff;
  --dp-color-texto: #1f2933;

  /* La proporción se controla por aspect-ratio; el JS ajusta
     según orientación. Por defecto: horizontal (1.414:1 = A4) */
  position: relative;
  width: 100%;
  aspect-ratio: 1.414 / 1;
  background: var(--dp-color-fondo);
  color: var(--dp-color-texto);
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5% 8%;
  box-sizing: border-box;
}
.diploma[data-orientacion="vertical"] {
  aspect-ratio: 1 / 1.414;
  padding: 6% 10%;
}

/* Las variables CSS --dp-color son fijas por plantilla; pero el
   usuario puede sobreescribir --dp-color vía JS (color principal). */

/* Estructura común interna */
.diploma .dp-tipo {
  font-size: clamp(10px, 1.4vw, 16px);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--dp-color);
  margin: 0 0 1.2vh;
  font-weight: 600;
}
.diploma .dp-titulo {
  font-size: clamp(28px, 4.5vw, 56px);
  font-weight: 700;
  color: var(--dp-color-oscuro);
  margin: 0 0 2vh;
  line-height: 1.05;
}
.diploma .dp-otorgado-a {
  font-size: clamp(11px, 1.4vw, 16px);
  color: var(--dp-color-texto);
  margin: 0 0 1vh;
  opacity: .8;
  font-style: italic;
}
.diploma .dp-nombre {
  font-size: clamp(28px, 5vw, 64px);
  margin: 0.5vh 0 2vh;
  line-height: 1.1;
  color: var(--dp-color-oscuro);
  word-break: break-word;
  max-width: 90%;
}
.diploma .dp-motivo {
  font-size: clamp(13px, 1.7vw, 22px);
  margin: 1vh 0 3vh;
  color: var(--dp-color-texto);
  max-width: 80%;
  line-height: 1.4;
}
.diploma .dp-pie {
  position: absolute;
  bottom: 6%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 0 8%;
  font-size: clamp(10px, 1.1vw, 14px);
}
.diploma .dp-firma {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 35%;
}
.diploma .dp-linea-firma {
  width: 200px;
  max-width: 100%;
  border-bottom: 1.5px solid var(--dp-color);
  margin-bottom: 4px;
  min-height: 2em;
}
.diploma .dp-firma .dp-firma-nombre {
  font-weight: 600;
  color: var(--dp-color-oscuro);
}
.diploma .dp-firma .dp-firma-rol {
  font-size: .9em;
  color: var(--dp-color-texto);
  opacity: .75;
}
.diploma .dp-fecha {
  font-size: clamp(11px, 1.2vw, 15px);
  color: var(--dp-color-texto);
  opacity: .8;
  font-style: italic;
}
.diploma .dp-logo {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  max-height: 12%;
  max-width: 22%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.diploma[data-orientacion="vertical"] .dp-logo {
  top: 3%;
  max-height: 9%;
}

/* ============================================================
   PLANTILLA 1: CLÁSICO / FORMAL
   Borde ornamentado doble, esquinas con filigranas SVG,
   tipografía serif elegante.
   ============================================================ */
.diploma.plantilla-clasico {
  --dp-color-claro: #b89b5e;
  --dp-color-oscuro: #4a3520;
  background: #fffdf5;
  font-family: "Times New Roman", Georgia, serif;
}
.diploma.plantilla-clasico::before {
  content: "";
  position: absolute;
  top: 2.5%; left: 2.5%; right: 2.5%; bottom: 2.5%;
  border: 4px double var(--dp-color);
  pointer-events: none;
}
.diploma.plantilla-clasico::after {
  content: "";
  position: absolute;
  top: 4%; left: 4%; right: 4%; bottom: 4%;
  border: 1px solid var(--dp-color-claro);
  pointer-events: none;
}
.diploma.plantilla-clasico .dp-ornamento-esquina {
  position: absolute;
  width: 80px;
  height: 80px;
  color: var(--dp-color-claro);
  pointer-events: none;
}
.diploma.plantilla-clasico .dp-ornamento-esquina.sup-izq { top: 3%; left: 3%; }
.diploma.plantilla-clasico .dp-ornamento-esquina.sup-der { top: 3%; right: 3%; transform: scaleX(-1); }
.diploma.plantilla-clasico .dp-ornamento-esquina.inf-izq { bottom: 3%; left: 3%; transform: scaleY(-1); }
.diploma.plantilla-clasico .dp-ornamento-esquina.inf-der { bottom: 3%; right: 3%; transform: scale(-1,-1); }
.diploma.plantilla-clasico .dp-titulo {
  font-family: "Cinzel Decorative", "Times New Roman", serif;
  letter-spacing: 0.08em;
}
.diploma.plantilla-clasico .dp-separador {
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), var(--dp-color-claro), rgba(255,255,255,0));
  margin: 1vh 0;
}

/* ============================================================
   PLANTILLA 2: INFANTIL / COLORIDO
   Estrellas y medalla SVG, colores vivos, bordes ondulados.
   ============================================================ */
.diploma.plantilla-infantil {
  --dp-color-claro: #ffd166;
  --dp-color-oscuro: #c44536;
  background: #fff8e7;
  font-family: "Comic Sans MS", "Trebuchet MS", sans-serif;
  border-radius: 18px;
  border: 6px dashed var(--dp-color);
  padding: 6% 7%;
}
.diploma.plantilla-infantil .dp-tipo {
  background: var(--dp-color);
  color: #fff;
  padding: 6px 18px;
  border-radius: 20px;
  display: inline-block;
  letter-spacing: 0.2em;
}
.diploma.plantilla-infantil .dp-titulo {
  font-family: "Lobster", "Comic Sans MS", cursive;
  color: var(--dp-color-oscuro);
  text-shadow: 2px 2px 0 var(--dp-color-claro);
}
.diploma.plantilla-infantil .dp-medalla {
  position: absolute;
  top: -10px;
  right: 8%;
  width: 90px;
  height: 110px;
  color: var(--dp-color);
  pointer-events: none;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,.1));
}
.diploma.plantilla-infantil .dp-estrellas {
  display: flex;
  gap: 8px;
  margin: 1vh 0;
  color: var(--dp-color-claro);
  font-size: clamp(16px, 2.2vw, 28px);
}
.diploma.plantilla-infantil .dp-nombre {
  font-family: "Lobster", "Comic Sans MS", cursive;
  color: var(--dp-color-oscuro);
  background: rgba(255,209,102,.3);
  padding: 4px 18px;
  border-radius: 12px;
}
.diploma.plantilla-infantil .dp-pie { font-family: "Comic Sans MS", sans-serif; }

/* ============================================================
   PLANTILLA 3: MODERNO / MINIMALISTA
   Líneas limpias, mucho espacio en blanco, sans-serif.
   Acento de color en franja lateral.
   ============================================================ */
.diploma.plantilla-moderno {
  --dp-color-claro: #e8edf2;
  --dp-color-oscuro: #2a3340;
  background: #ffffff;
  font-family: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  padding: 5% 8% 5% 12%;
  align-items: flex-start;
  text-align: left;
}
.diploma.plantilla-moderno::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 5%;
  background: var(--dp-color);
}
.diploma.plantilla-moderno .dp-tipo {
  letter-spacing: 0.25em;
  font-size: clamp(9px, 1.1vw, 13px);
  color: var(--dp-color);
  margin-bottom: 4vh;
}
.diploma.plantilla-moderno .dp-titulo {
  font-size: clamp(24px, 3.5vw, 44px);
  font-weight: 300;
  color: var(--dp-color-oscuro);
  margin-bottom: 1vh;
  letter-spacing: -0.02em;
}
.diploma.plantilla-moderno .dp-linea-corta {
  width: 60px;
  height: 3px;
  background: var(--dp-color);
  margin: 1vh 0 4vh;
}
.diploma.plantilla-moderno .dp-otorgado-a {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: clamp(9px, 1.1vw, 12px);
  color: var(--dp-color);
  margin-bottom: 1vh;
}
.diploma.plantilla-moderno .dp-nombre {
  font-family: "Georgia", serif;
  font-weight: 400;
  font-size: clamp(24px, 4vw, 52px);
  text-align: left;
  margin: 0 0 3vh;
  max-width: 95%;
}
.diploma.plantilla-moderno .dp-motivo {
  text-align: left;
  max-width: 95%;
  font-size: clamp(12px, 1.5vw, 18px);
  color: #555;
}
.diploma.plantilla-moderno .dp-pie {
  justify-content: flex-start;
  gap: 60px;
  padding-left: 12%;
}
.diploma.plantilla-moderno .dp-firma { align-items: flex-start; }
.diploma.plantilla-moderno .dp-linea-firma { width: 180px; }

/* ============================================================
   PLANTILLA 4: DEPORTIVO
   Estilo trofeo/cinta de meta, líneas diagonales dinámicas,
   colores intensos.
   ============================================================ */
.diploma.plantilla-deportivo {
  --dp-color-claro: #ff6b35;
  --dp-color-oscuro: #1d3557;
  background:
    linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 45%, rgba(255,107,53,.08) 45%, rgba(255,107,53,.08) 55%, rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 65%, rgba(29,53,87,.05) 65%, rgba(29,53,87,.05) 75%, rgba(255,255,255,0) 75%),
    #ffffff;
  font-family: "Trebuchet MS", "Arial Narrow", sans-serif;
  border: 8px solid var(--dp-color);
  border-radius: 4px;
  padding: 5% 7%;
}
.diploma.plantilla-deportivo::before {
  content: "";
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border: 2px solid var(--dp-color-claro);
  pointer-events: none;
}
.diploma.plantilla-deportivo .dp-tipo {
  background: var(--dp-color);
  color: #fff;
  padding: 4px 16px;
  font-weight: 700;
  letter-spacing: 0.2em;
  display: inline-block;
  margin-bottom: 2vh;
}
.diploma.plantilla-deportivo .dp-titulo {
  font-size: clamp(26px, 4vw, 50px);
  text-transform: uppercase;
  font-weight: 900;
  color: var(--dp-color-oscuro);
  letter-spacing: 0.02em;
}
.diploma.plantilla-deportivo .dp-trofeo {
  width: 80px;
  height: 80px;
  color: var(--dp-color-claro);
  margin-bottom: 1vh;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,.15));
}
.diploma.plantilla-deportivo .dp-nombre {
  font-family: "Trebuchet MS", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dp-color-oscuro);
  border-bottom: 3px solid var(--dp-color-claro);
  padding-bottom: 4px;
  display: inline-block;
}
.diploma.plantilla-deportivo .dp-motivo {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(11px, 1.4vw, 16px);
  color: var(--dp-color);
}
.diploma.plantilla-deportivo .dp-pie { font-weight: 600; }
.diploma.plantilla-deportivo .dp-linea-firma {
  border-bottom: 2px solid var(--dp-color);
  border-top: 1px solid var(--dp-color-claro);
  padding-top: 1px;
}

/* ============================================================
   PLANTILLA 5: VALORES / MEJOR COMPAÑERO
   Estilo cálido, corazón/estrella central, fondo suave.
   ============================================================ */
.diploma.plantilla-valores {
  --dp-color-claro: #e91e63;
  --dp-color-oscuro: #880e4f;
  background:
    radial-gradient(circle at 15% 20%, rgba(233,30,99,.06) 0%, rgba(255,255,255,0) 40%),
    radial-gradient(circle at 85% 80%, rgba(233,30,99,.06) 0%, rgba(255,255,255,0) 40%),
    #fffafc;
  font-family: Georgia, "Palatino Linotype", serif;
  border-radius: 0;
  padding: 6% 9%;
}
.diploma.plantilla-valores::before {
  content: "";
  position: absolute;
  top: 3%; left: 3%; right: 3%; bottom: 3%;
  border: 2px solid var(--dp-color-claro);
  border-radius: 50% / 8%;
  pointer-events: none;
}
.diploma.plantilla-valores::after {
  content: "";
  position: absolute;
  top: 4.5%; left: 4.5%; right: 4.5%; bottom: 4.5%;
  border: 1px dashed var(--dp-color);
  border-radius: 50% / 8%;
  pointer-events: none;
}
.diploma.plantilla-valores .dp-corazon {
  width: 55px;
  height: 55px;
  color: var(--dp-color-claro);
  margin-bottom: 1vh;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,.05));
}
.diploma.plantilla-valores .dp-tipo {
  color: var(--dp-color-claro);
  font-style: italic;
  letter-spacing: 0.2em;
  margin-bottom: 1vh;
}
.diploma.plantilla-valores .dp-titulo {
  font-family: "Great Vibes", Georgia, cursive;
  font-size: clamp(34px, 5vw, 62px);
  color: var(--dp-color-oscuro);
  font-weight: 400;
}
.diploma.plantilla-valores .dp-nombre {
  font-family: "Great Vibes", Georgia, cursive;
  color: var(--dp-color-oscuro);
  font-weight: 400;
}
.diploma.plantilla-valores .dp-motivo {
  font-style: italic;
  color: var(--dp-color-oscuro);
  font-size: clamp(12px, 1.5vw, 18px);
}

/* ============================================================
   PLANTILLA 6: CERTIFICADO DE PARTICIPACIÓN (genérico)
   Estilo limpio con sello circular (stamp) y banda inferior.
   ============================================================ */
.diploma.plantilla-participacion {
  --dp-color-claro: #00838f;
  --dp-color-oscuro: #005662;
  background: #ffffff;
  font-family: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  padding: 5% 8% 12%;
}
.diploma.plantilla-participacion::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 14px;
  background: linear-gradient(90deg,
    var(--dp-color) 0%, var(--dp-color) 25%,
    var(--dp-color-claro) 25%, var(--dp-color-claro) 50%,
    var(--dp-color) 50%, var(--dp-color) 75%,
    var(--dp-color-claro) 75%, var(--dp-color-claro) 100%);
}
.diploma.plantilla-participacion::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 14px;
  background: linear-gradient(90deg,
    var(--dp-color-claro) 0%, var(--dp-color-claro) 25%,
    var(--dp-color) 25%, var(--dp-color) 50%,
    var(--dp-color-claro) 50%, var(--dp-color-claro) 75%,
    var(--dp-color) 75%, var(--dp-color) 100%);
}
.diploma.plantilla-participacion .dp-sello {
  position: absolute;
  top: 18%;
  right: 10%;
  width: 100px;
  height: 100px;
  color: var(--dp-color-claro);
  opacity: 0.85;
  transform: rotate(-12deg);
  pointer-events: none;
}
.diploma.plantilla-participacion .dp-tipo {
  letter-spacing: 0.35em;
  color: var(--dp-color-claro);
  font-weight: 600;
}
.diploma.plantilla-participacion .dp-titulo {
  font-weight: 700;
  font-size: clamp(28px, 4vw, 50px);
  color: var(--dp-color-oscuro);
}
.diploma.plantilla-participacion .dp-nombre {
  font-family: "Georgia", serif;
  font-weight: 700;
  color: var(--dp-color-oscuro);
  border-bottom: 2px solid var(--dp-color-claro);
  display: inline-block;
  padding: 0 30px 6px;
}
.diploma.plantilla-participacion .dp-motivo {
  font-size: clamp(12px, 1.5vw, 18px);
  color: #444;
  max-width: 70%;
}
.diploma.plantilla-participacion .dp-pie {
  bottom: 12%;
}

/* ====== Miniaturas para el selector (reutilizan las clases) ====== */
.tarjeta-plantilla .miniatura-plantilla {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.tarjeta-plantilla .miniatura-plantilla .diploma {
  width: 100%;
  height: 100%;
  font-size: 6px;
}
.tarjeta-plantilla .miniatura-plantilla .diploma .dp-tipo { font-size: 5px; margin-bottom: 2px; }
.tarjeta-plantilla .miniatura-plantilla .diploma .dp-titulo { font-size: 11px; margin-bottom: 4px; }
.tarjeta-plantilla .miniatura-plantilla .diploma .dp-otorgado-a { font-size: 5px; margin-bottom: 1px; }
.tarjeta-plantilla .miniatura-plantilla .diploma .dp-nombre { font-size: 13px; margin-bottom: 4px; }
.tarjeta-plantilla .miniatura-plantilla .diploma .dp-motivo { font-size: 6px; margin-bottom: 6px; }
.tarjeta-plantilla .miniatura-plantilla .diploma .dp-pie { font-size: 5px; bottom: 4%; }
.tarjeta-plantilla .miniatura-plantilla .diploma .dp-linea-firma { width: 50px; min-height: 1em; }
.tarjeta-plantilla .miniatura-plantilla .diploma .dp-logo { max-height: 14%; max-width: 24%; }
.tarjeta-plantilla .miniatura-plantilla .diploma .dp-medalla { width: 30px; height: 35px; }
.tarjeta-plantilla .miniatura-plantilla .diploma .dp-trofeo { width: 30px; height: 30px; margin-bottom: 2px; }
.tarjeta-plantilla .miniatura-plantilla .diploma .dp-corazon { width: 22px; height: 22px; margin-bottom: 2px; }
.tarjeta-plantilla .miniatura-plantilla .diploma .dp-sello { width: 38px; height: 38px; top: 16%; right: 6%; }
.tarjeta-plantilla .miniatura-plantilla .diploma .dp-ornamento-esquina { width: 28px; height: 28px; }
.tarjeta-plantilla .miniatura-plantilla .diploma .dp-separador,
.tarjeta-plantilla .miniatura-plantilla .diploma .dp-linea-corta { margin: 2px 0; height: 1px; }

/* ====== Pantalla pequeña: las miniaturas del lote pueden reducir el fuente ====== */
.item-lote .miniatura-item .diploma .dp-tipo { font-size: 6px; }
.item-lote .miniatura-item .diploma .dp-titulo { font-size: 11px; }
.item-lote .miniatura-item .diploma .dp-nombre { font-size: 14px; }
.item-lote .miniatura-item .diploma .dp-motivo { font-size: 7px; }
.item-lote .miniatura-item .diploma .dp-pie { font-size: 6px; }
.item-lote .miniatura-item .diploma .dp-linea-firma { width: 60px; min-height: 1.2em; }

/* ====== @font-face de las fuentes decorativas locales ====== */
@font-face {
  font-family: "Great Vibes";
  src: url("../fonts/GreatVibes-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lobster";
  src: url("../fonts/Lobster-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel Decorative";
  src: url("../fonts/CinzelDecorative-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel Decorative";
  src: url("../fonts/CinzelDecorative-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}