/* ============================================================
   FRISCO Abierto — extended.css
   Estilos NUEVOS para las subpáginas y el menú desplegable.
   Se carga DESPUÉS de main.css. No modifica ningún estilo
   existente: toda clase nueva usa el prefijo "ext-".
   ============================================================ */

:root {
  /* Paleta copiada de main.css con prefijo ext- para no colisionar
     con las variables existentes (--bg, --navy, --green, etc.). */
  --ext-bg: #f5f0e6;
  --ext-paper: #fffdf8;
  --ext-ink: #242620;
  --ext-muted: #62675f;
  --ext-navy: #17324d;
  --ext-navy-2: #214968;
  --ext-green: #245c4b;
  --ext-green-2: #307661;
  --ext-gold: #b28b3e;
  --ext-gold-soft: #eadbb7;
  --ext-line: #ddd5c7;
  --ext-soft-green: #e4efe9;
  --ext-soft-blue: #e7eef5;
  --ext-soft-red: #f3e5df;
  --ext-soft-violet: #eee8f4;
  --ext-shadow: 0 22px 60px rgba(23, 50, 77, 0.11);
  --ext-radius-xl: 32px;
  --ext-radius-lg: 22px;
  --ext-radius-md: 15px;
  --ext-serif: Georgia, "Times New Roman", serif;
  --ext-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---- Menú desplegable -------------------------------------- */
.ext-navgroup { position: relative; }
.ext-caret { margin-left: 3px; font-size: .62rem; }
.ext-submenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 120;
  min-width: 230px;
  margin: 0;
  padding: 8px;
  list-style: none;
  display: none;
  border: 1px solid var(--ext-line);
  border-radius: var(--ext-radius-md);
  background: var(--ext-paper);
  box-shadow: var(--ext-shadow);
}
.ext-navgroup:hover .ext-submenu,
.ext-navgroup:focus-within .ext-submenu { display: block; }
.ext-submenu a {
  display: block;
  padding: 8px 11px;
  border-radius: 9px;
  color: #4f5650;
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
}
.ext-submenu a::after { display: none; }
.ext-submenu a:hover { background: var(--ext-soft-green); color: var(--ext-green); }

/* ---- Tarjeta de contenido genérica -------------------------- */
.ext-card {
  padding: 24px;
  border: 1px solid var(--ext-line);
  border-radius: var(--ext-radius-lg);
  background: var(--ext-paper);
  box-shadow: 0 10px 28px rgba(23, 50, 77, 0.05);
}
.ext-card h3 { margin: 0 0 10px; }
.ext-card p { margin: 0; color: var(--ext-muted); }

/* ---- Rejilla de tarjetas ------------------------------------ */
.ext-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

/* ---- Acordeón genérico -------------------------------------- */
.ext-accordion { border: 1px solid var(--ext-line); border-radius: var(--ext-radius-md); background: var(--ext-paper); overflow: hidden; }
.ext-accordion + .ext-accordion { margin-top: 10px; }
.ext-accordion summary { padding: 17px 20px; cursor: pointer; color: var(--ext-navy); font: 700 1.1rem/1.3 var(--ext-serif); }
.ext-accordion summary:hover { color: var(--ext-green); }
.ext-accordion .ext-accordion-body { padding: 0 20px 20px; color: var(--ext-muted); }

/* ---- Línea de tiempo ---------------------------------------- */
.ext-timeline { position: relative; max-width: 920px; margin: 0 auto; padding: 0; list-style: none; }
.ext-timeline::before { content: ""; position: absolute; top: 20px; bottom: 20px; left: 31px; width: 2px; background: linear-gradient(var(--ext-green), var(--ext-gold)); }
.ext-timeline li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 22px; padding: 18px 0; }
.ext-step { position: relative; z-index: 2; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; background: var(--ext-navy); color: white; font-weight: 900; }
.ext-timeline li > div { padding: 20px 24px; border: 1px solid var(--ext-line); border-radius: 20px; background: var(--ext-paper); }
.ext-timeline h3 { margin: 0 0 7px; }
.ext-timeline p { margin: 0; color: var(--ext-muted); }

/* ---- Tabla responsiva --------------------------------------- */
.ext-table-wrap { overflow-x: auto; border: 1px solid var(--ext-line); border-radius: var(--ext-radius-md); background: var(--ext-paper); }
.ext-table-wrap table { width: 100%; border-collapse: collapse; }
.ext-table-wrap caption { padding: 13px; text-align: left; font-weight: 800; color: var(--ext-navy); }
.ext-table-wrap th, .ext-table-wrap td { padding: 11px 13px; border: 1px solid var(--ext-line); text-align: left; vertical-align: top; font-size: .84rem; }
.ext-table-wrap thead th { background: var(--ext-navy); color: white; }

/* ---- Bloque de cita ------------------------------------------ */
.ext-quote { margin: 18px 0; padding: 18px 22px; border-left: 4px solid var(--ext-gold); border-radius: 0 var(--ext-radius-md) var(--ext-radius-md) 0; background: var(--ext-soft-blue); }
.ext-quote p { margin: 0; color: var(--ext-navy); font: italic 1.05rem/1.6 var(--ext-serif); }
.ext-quote cite { display: block; margin-top: 8px; color: var(--ext-muted); font: normal .8rem/1.5 var(--ext-sans); }

/* ---- Caja de información destacada --------------------------- */
.ext-callout { margin: 18px 0; padding: 18px 20px; border: 1px solid var(--ext-line); border-radius: var(--ext-radius-md); background: var(--ext-paper); }
.ext-callout.ext-callout-note { border-left: 5px solid var(--ext-gold); }
.ext-callout.ext-callout-warn { border-left: 5px solid #b0543a; background: var(--ext-soft-red); }
.ext-callout h3 { margin: 0 0 8px; }
.ext-callout p { margin: 0; color: var(--ext-muted); }

/* ---- Responsive de los componentes nuevos -------------------- */
@media (max-width: 980px) {
  .ext-navgroup { position: static; }
  .ext-submenu {
    position: static;
    display: block;
    min-width: 0;
    margin: 4px 0 0;
    padding: 0 0 0 12px;
    border: 0;
    border-left: 3px solid var(--ext-gold-soft);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .ext-submenu a { padding: 7px 0; font-size: .82rem; }
  .ext-caret { display: none; }
  .ext-timeline::before { left: 24px; }
  .ext-timeline li { grid-template-columns: 50px 1fr; gap: 13px; }
  .ext-step { width: 50px; height: 50px; border-radius: 15px; }
  .ext-timeline li > div { padding: 17px; }
}

@media (max-width: 720px) {
  .ext-grid { grid-template-columns: 1fr; }
}

/* ---- Integración con la ampliación (frisco-widgets.css) ---- */
:root {
  /* El CSS acotado de la ampliación espera --blue y --max; el sitio usa --navy y --shell. */
  --blue: var(--navy);
  --max: var(--shell);
}
[data-frisco-contenidos] h1,
[data-frisco-contenidos] h2,
[data-frisco-contenidos] h3,
[data-frisco-contenidos] h4 { font-family: var(--serif); }

/* ---- Enlace de profundización en secciones ---- */
.deep-link { margin: 22px 0 0; }
.deep-link a { color: var(--green); font-weight: 800; font-size: .9rem; text-decoration: none; }
.deep-link a:hover { text-decoration: underline; }

/* ---- Cuadrícula de contenidos (portada) ---- */
.contents-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.content-card { display: flex; flex-direction: column; gap: 11px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); text-decoration: none; color: inherit; transition: transform .16s ease, box-shadow .16s ease; }
.content-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.content-num { color: var(--green); font: 900 .7rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.content-card h3 { margin: 0; font-size: 1.28rem; }
.content-card p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.content-link { margin-top: auto; padding-top: 9px; color: var(--green); font-weight: 800; font-size: .9rem; }
@media (max-width: 980px) { .contents-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .contents-grid { grid-template-columns: 1fr; } }