/* 
programacion en internet (pi)
Alfredo Soldevilla Pérez
*/

/* =========== RESET / BASE =========== */
html, body, div, span, applet, object, iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}
html {
  box-sizing: border-box;
  font-size: 100%; /* base 16px */
}
*, *:before, *:after { box-sizing: inherit; }

:root {
  --bg: #ffffff;
  --surface: #f8f9fa;
  --text: #111111;
  --muted: #555555;
  --accent: #0b5ed7;
  --accent-strong: #073b8a;
  --error: #d93025;
  --focus-shadow: rgba(11,94,215,0.20);
  --radius: 8px;
  --maxw: 1200px;
}

/* body y contenedor principal */
body#pi {
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* evita scroll horizontal */
}
#contenedor {
  width: 95%;
  max-width: var(--maxw);
  margin: 1rem auto;
  padding: 1rem;
}

/* SKIP LINK para accesibilidad teclado */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: .5rem .75rem;
  background: #000;
  color: #fff;
  border-radius: 4px;
  z-index: 9999;
}

/* =========== CABECERA / INTRO =========== */
#intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  background: linear-gradient(180deg, var(--surface) 0%, #ffffff 100%);
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px solid #e6e7e8;
}

/* titulo */
#titulo h1, #titulo h2 {
  margin: 0;
  line-height: 1.15;
}
#titulo h1 span {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
}
#titulo h2 span {
  display: block;
  font-size: 1rem;
  color: var(--muted);
  margin-top: .25rem;
}

/* resumen y comentario (textos) */
#resumen, #comentario {
  padding: .75rem;
  background: transparent;
}
#resumen p.p1, #comentario p.p1 {
  color: var(--text);
  margin-bottom: .5rem;
}
#resumen ul.ul1, #contenidos ul.ul1, #enlacesversiones ul.ul1 {
  margin-left: 1.25rem;
  margin-top: .5rem;
  margin-bottom: .5rem;
}
#resumen ul.ul1 li {
  margin-bottom: .35rem;
}

/* enlaces internos (Apartados) */
#enlacesintra {
  margin-top: .75rem;
  padding: .75rem;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid #e9eaeb;
}
#enlacesintra h3.intra span { font-weight: 700; color: var(--text); }
#enlacesintra ul.ul1 { list-style-type: none; display: flex; gap: .5rem; flex-wrap: wrap; }
#enlacesintra a {
  color: var(--accent);
  text-decoration: none;
  padding: .35rem .55rem;
  border-radius: 6px;
  border: 1px solid transparent;
}
#enlacesintra a:focus, #enlacesintra a:hover {
  background: rgba(11,94,215,0.06);
  box-shadow: 0 0 0 4px var(--focus-shadow);
  outline: none;
}

/* =========== APARTADOS (main content) =========== */
#apartados {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* cada sección interna */
#apartados > div {
  background: #fff;
  border: 1px solid #ececec;
  padding: 1rem;
  border-radius: 6px;
}
#apartados h3 span { font-size: 1.125rem; font-weight: 700; color: var(--text); margin-bottom: .5rem; display: block; }

/* listas anidadas (contenidos) */
#contenidos ul { margin-left: 1rem; margin-top: .5rem; margin-bottom: .5rem; }
#contenidos ul li { margin-bottom: .35rem; }

/* definiciones (profesores, biblio) */
dl { margin-top: .5rem; }
dt { font-weight: 700; margin-top: .5rem; }
dd { margin-left: 1rem; margin-bottom: .5rem; color: var(--muted); }

/* =========== ENLACES LATERALES / VERSIONES / RECURSOS =========== */
#enlaces {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
#lselecciona, #lhistorico, #lrecursos {
  background: var(--surface);
  padding: .75rem;
  border-radius: 6px;
  border: 1px solid #eaeaea;
}
#lselecciona ul, #lhistorico ul, #lrecursos ul { list-style: none; margin-left: 0; }
#lselecciona li, #lhistorico li, #lrecursos li { margin-bottom: .4rem; }
#lselecciona a.a1, #lhistorico a.a1, #lrecursos a.a1 {
  color: var(--accent);
  text-decoration: none;
}
#lselecciona a.a1:focus, #lselecciona a.a1:hover {
  text-decoration: underline;
  box-shadow: 0 0 0 4px var(--focus-shadow);
  outline: none;
}

/* versiones anteriores en listado compacto */
#enlacesversiones ul.ul1 { display: flex; gap: .5rem; flex-wrap: wrap; list-style: none; }

/* =========== FOOTER SIMPLIFICADO =========== */
#extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 {
  display: none; /* elementos extra no visibles por defecto; disponibles para decoraciones si quieres mostrarlos */
}

/* =========== TABLAS (si hay) =========== */
table { width: 100%; border-collapse: collapse; margin-top: .5rem; margin-bottom: .5rem; }
th, td { padding: .5rem; border: 1px solid #e9e9ea; text-align: left; }
th { background: #f4f6f7; font-weight: 700; }

/* =========== FORMULARIOS (si aparecen) =========== */
input, textarea, select, button {
  font: inherit;
  padding: .5rem .6rem;
  border-radius: 6px;
  border: 1px solid #cfcfcf;
}
input:focus, textarea:focus, select:focus, button:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-shadow);
  border-color: var(--accent-strong);
}

/* =========== ACCESIBILIDAD: FOCUS/TECLADO =========== */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 4px var(--focus-shadow);
  border-radius: 6px;
}

/* =========== IMAGENES (para tus imagen.png / miniatura.png) =========== */
.preview-capture {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
}

/* =========== UTILIDADES ========= */
.text-muted { color: var(--muted); }
.center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mb-1 { margin-bottom: 1rem; }

/* =========== RESPONSIVE (mobile-first) =========== */
/* móvil (base) ya cubierto; ajuste a 640px+ requerido */
@media (min-width: 640px) {
  #intro { grid-template-columns: 1fr 1fr; align-items: start; }
  #titulo { padding-right: .75rem; }
  #resumen, #comentario { padding: .5rem; }
  #enlacesintra ul.ul1 { justify-content: flex-start; }
  #apartados { grid-template-columns: 2fr 1fr; gap: 1rem; }
  #enlaces { grid-template-columns: 1fr; }
}

/* tablet / desktop */
@media (min-width: 900px) {
  :root { --maxw: 1400px; }
  #contenedor { padding: 1.25rem; }
  #apartados { grid-template-columns: 2fr 1fr; }
  #enlaces { grid-template-columns: 1fr 1fr; gap: 1rem; }
}

/* large up to 1920px */
@media (min-width: 1200px) and (max-width: 1920px) {
  :root { --maxw: 1600px; }
  #intro { grid-template-columns: 1.2fr .8fr; }
}

/* prefieren reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* pequeños ajustes finales para evitar horizontales */
html, body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

/* =========== CONTRASTE / COLORES CRÍTICOS =========== */
/* ejemplo: enlaces importantes */
a { color: var(--accent); }
a:visited { color: #084a9e; }

/* error/validación */
.error { color: var(--error); font-weight: 700; }