/* Cards con el acabado del inicio, en todas las vistas.

   El inicio (inicio-apple.css) fija el lenguaje de las cards: superficie
   blanca que se tiñe hacia una esquina con el color de su tono, borde blanco,
   esquinas de 24 a 30 px, sombra larga y muy diluida, e ilustración en capas
   dentro de una baldosa clara. Esta hoja lo lleva a las demás cards: temas,
   fichas de documento, el Top 5 de la búsqueda y las etapas del Instrumento.

   Va la última y con `html body` delante: las hojas históricas
   (cards-institucionales, cards-editoriales, ajustes-ui) usan !important y
   selectores con id, y sin esto ganarían. El estante de la biblioteca queda
   fuera a propósito: sus libros son volúmenes, no cards. */

html body {
  --ci-sombra: 0 1px 2px #1b304d08, 0 12px 28px -20px #1a365b66, inset 0 0 0 1px #ffffffb3;
  --ci-sombra-hover: 0 14px 30px -16px #223d6a40, 0 2px 4px #102e4d07;
  --ci-tinta: #223149;
  --ci-secundario: #758092;
}
:is([data-tono="azul"], .tema-card:not([data-tono]), .instrumento-etapa:not([data-tono])) {
  --ci-acento: #286aaa; --ci-tinte: #eaf3ff; --ci-borde: #d4e4f5;
}
[data-tono="violeta"] { --ci-acento: #7753b1; --ci-tinte: #f0eafa; --ci-borde: #e1d5f3; }
[data-tono="verde"] { --ci-acento: #277e70; --ci-tinte: #e7f5f0; --ci-borde: #cce9e0; }
[data-tono="ambar"] { --ci-acento: #976d33; --ci-tinte: #fbf1df; --ci-borde: #efdfbd; }

/* --- Temas ------------------------------------------------------------- */
html body #principal .tema-card:not(.bibdash-tema) {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) !important;
  grid-template-rows: auto auto 1fr !important;
  align-items: center;
  gap: 4px 18px !important;
  min-height: 176px !important;
  padding: 24px !important;
  text-align: left !important;
  border: 1px solid #fff !important;
  border-radius: 27px !important;
  background: linear-gradient(120deg, var(--ci-tinte) -40%, #fff 68%) !important;
  box-shadow: var(--ci-sombra) !important;
  color: var(--ci-tinta) !important;
  transform: none;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease !important;
}
html body #principal .tema-card:not(.bibdash-tema)::before { display: none !important; }
/* La flecha redonda del mosaico del inicio, abajo a la derecha. */
html body #principal .tema-card:not(.bibdash-tema)::after {
  content: "→" !important;
  display: grid !important; place-items: center;
  position: absolute !important; inset: auto 22px 20px auto !important;
  width: 29px !important; height: 29px !important;
  border: 1px solid var(--ci-borde) !important; border-radius: 50% !important;
  background: #fff !important; box-shadow: 0 2px 3px #1c365109 !important;
  color: var(--ci-acento) !important; font-size: 15px; line-height: 1;
  opacity: 1 !important; transform: none !important; z-index: 1;
}
html body #principal .tema-card:not(.bibdash-tema) .tema-icono {
  grid-column: 1 !important; grid-row: 1 / 3 !important;
  display: grid !important; place-items: center;
  width: 76px !important; height: 76px !important; margin: 0 !important;
  border: 1px solid #fff !important; border-radius: 22px !important;
  background: linear-gradient(140deg, #ffffffde, var(--ci-tinte)) !important;
  box-shadow: inset 0 1px 0 #fff, 0 7px 12px -9px #263f6940 !important;
  color: var(--ci-acento) !important;
  transform: none !important;
}
html body #principal .tema-card:not(.bibdash-tema) .tema-icono svg {
  width: 64px !important; height: 64px !important;
  filter: drop-shadow(0 2px 2px #22355209);
}
html body #principal .tema-card:not(.bibdash-tema) h3 {
  grid-column: 2 !important; grid-row: 1 !important; align-self: end;
  margin: 0 !important;
  color: var(--ci-tinta) !important;
  font-size: 18px !important; font-weight: 600 !important;
  line-height: 1.25 !important; letter-spacing: -.025em !important;
  text-transform: none !important;
}
html body #principal .tema-card:not(.bibdash-tema) h3::first-letter { text-transform: uppercase; }
html body #principal .tema-card:not(.bibdash-tema) > p {
  grid-column: 2 !important; grid-row: 2 !important; align-self: start;
  margin: 3px 0 0 !important;
  color: var(--ci-secundario) !important; font-size: 11px !important; line-height: 1.5;
}
html body #principal .tema-card:not(.bibdash-tema) .tema-card-barra {
  grid-column: 1 / -1 !important; grid-row: 3 !important; align-self: end;
  display: flex !important; gap: 4px; margin: 16px 44px 4px 0 !important;
}
/* Con dos id a propósito: cards-institucionales pinta los tramos con un
   degradado (dorado en la primera card) desde selectores de dos id. */
html body #principal :is(#vista-temas, #vista-biblioteca, #vista-estante) .tema-card.tema-card:not(.bibdash-tema) .tema-card-barra > span {
  flex: 1; height: 5px !important; border-radius: 3px !important;
  background: #e9edf3 none !important; box-shadow: none !important;
}
html body #principal :is(#vista-temas, #vista-biblioteca, #vista-estante) .tema-card.tema-card:not(.bibdash-tema) .tema-card-barra > span.lleno {
  background: var(--ci-acento) none !important; opacity: .8;
}
html body #principal .tema-card:not(.bibdash-tema) .tema-reflejo { display: none !important; }

/* --- Fichas de documento ---------------------------------------------- */
html body #principal .doc-card:not(.bibdash-doc) {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr) !important;
  align-items: start;
  gap: 22px !important;
  padding: 27px !important;
  text-align: left !important;
  border: 1px solid #fff !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, #fff 60%, #f4f7fb) !important;
  box-shadow: 0 2px 3px #13284904, 0 10px 24px -18px #20385754, inset 0 0 0 1px #ffffffb3 !important;
  color: var(--ci-tinta) !important;
  transform: none;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
html body #principal .doc-card:not(.bibdash-doc)::before,
html body #principal .doc-card:not(.bibdash-doc)::after,
html body #principal .doc-card:not(.bibdash-doc) .tipo-marca { display: none !important; }
html body #principal .doc-card:not(.bibdash-doc) .doc-card-icono {
  grid-column: 1; grid-row: 1;
  display: grid; place-items: center;
  width: 78px; height: 85px;
  border: 1px solid #fff; border-radius: 21px;
  background: linear-gradient(140deg, #f7faff, #ebf0f8);
  box-shadow: inset 0 1px 0 #fff, 0 6px 10px -9px #23446840;
}
html body #principal .doc-card:not(.bibdash-doc) .doc-card-icono svg { width: 68px; height: 68px; }
html body #principal .doc-card:not(.bibdash-doc) .doc-card-cuerpo { grid-column: 2; min-width: 0; }
html body #principal .doc-card:not(.bibdash-doc) .doc-card-tipo {
  color: #6e7784 !important; font-size: 10px !important; font-weight: 500 !important;
  letter-spacing: .05em !important; text-transform: uppercase !important;
  background: transparent !important; padding: 0 !important; border: 0 !important;
}
html body #principal .doc-card:not(.bibdash-doc) h3 {
  margin: 9px 0 10px !important;
  color: #242933 !important;
  font-size: 20px !important; font-weight: 600 !important;
  line-height: 1.3 !important; letter-spacing: -.02em !important;
}
html body #principal .doc-card:not(.bibdash-doc) .doc-card-cuerpo > p {
  color: #646e7b !important; font-size: 13px !important; line-height: 1.6 !important;
}
html body #principal .doc-card:not(.bibdash-doc) .doc-card-meta { color: var(--ci-secundario) !important; font-size: 11px !important; }

/* --- Top 5 de la búsqueda: un panel como los del inicio --------------- */
html body #principal #vista-buscar .top5 {
  padding: 30px !important;
  border: 1px solid #fff !important;
  border-radius: 28px !important;
  background: linear-gradient(160deg, #fff 45%, #f6f8fc) !important;
  box-shadow: 0 12px 32px -22px #283e6152, 0 1px 2px #13284905 !important;
}
html body #principal #vista-buscar .top5-fila { border-radius: 14px !important; }
html body #principal #vista-buscar .top5-fila:hover { background: #eaf2fd !important; }

/* --- Instrumento: superficies luminosas, iconos y jerarquía por etapa. */
html body #expedienteContenido .instrumento-etapas { gap:26px; margin-top:38px; }
html body #expedienteContenido .instrumento-etapa {
  --fase-inicio:#e4f9f1; --fase-medio:#c7eade; --fase-fin:#afd9d5; --fase-tinta:#22574e;
  display:flex; flex-direction:column; min-height:432px; padding:30px; border-radius:32px;
  border:1px solid #f7fffd !important;
  background:radial-gradient(ellipse at 0% 0%,#ffffffd9,transparent 62%),radial-gradient(ellipse at 100% 100%,#ffffff22,transparent 65%),linear-gradient(135deg,var(--fase-inicio),var(--fase-medio) 58%,var(--fase-fin)) !important;
  color:var(--fase-tinta) !important;
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #ffffff50,0 3px 6px #244c450a,0 24px 42px -20px color-mix(in srgb,var(--ci-acento) 45%,transparent) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
html body #expedienteContenido .instrumento-etapa[data-tono="azul"] { --fase-inicio:#dceeff; --fase-medio:#b9d9f8; --fase-fin:#a6c5ef; --fase-tinta:#234e7c; }
html body #expedienteContenido .instrumento-etapa[data-tono="violeta"] { --fase-inicio:#f0eaff; --fase-medio:#ded3f2; --fase-fin:#c8c6e8; --fase-tinta:#534570; }
html body #expedienteContenido .instrumento-etapa::before {
  background:radial-gradient(300px circle at var(--cursor-x,85%) var(--cursor-y,0%),#ffffff66,transparent 72%) !important;
}
html body #expedienteContenido .instrumento-etapa::after { display:none; }
html body #expedienteContenido .instrumento-etapa:is(:hover,:focus-visible) {
  transform:translateY(-5px); filter:none;
  box-shadow:inset 0 1px 0 #fff,0 6px 12px #244c4510,0 30px 48px -20px color-mix(in srgb,var(--ci-acento) 50%,transparent) !important;
}
html body #expedienteContenido .instrumento-etapa:focus-visible { outline:3px solid var(--fase-tinta); outline-offset:5px; }
html body #expedienteContenido .instrumento-etapa-icono {
  width:112px; height:112px; margin:0 0 26px; border-radius:30px;
  border:1px solid #fff !important;
  background:linear-gradient(140deg,#fffffff2,#ffffff50) !important;
  box-shadow:inset 0 2px 0 #fff,0 3px 5px #24435b06,0 15px 22px -12px color-mix(in srgb,var(--ci-acento) 45%,transparent) !important;
}
html body #expedienteContenido .instrumento-etapa-icono svg { width:90px !important; height:90px !important; filter:drop-shadow(0 5px 6px #18335714) !important; }
html body #expedienteContenido .instrumento-etapa-numero {
  align-self:flex-start; padding:7px 10px; border:1px solid #ffffffa6; border-radius:9px;
  background:#ffffff50; color:var(--fase-tinta) !important; font-size:10px; letter-spacing:.12em;
}
html body #expedienteContenido .instrumento-etapa h2 { margin:14px 0 12px; color:var(--fase-tinta) !important; font-size:clamp(30px,3vw,39px); font-weight:700 !important; letter-spacing:-.045em; text-shadow:none !important; }
html body #expedienteContenido .instrumento-etapa p { margin:0 0 28px; color:var(--fase-tinta) !important; font-size:14px; line-height:1.65; }
html body #expedienteContenido .instrumento-etapa-accion {
  min-height:51px; border:1px solid #ffffffd9 !important; border-radius:16px;
  background:linear-gradient(145deg,#fff,#ffffffa6) !important; color:var(--fase-tinta) !important;
  box-shadow:inset 0 1px 0 #fff,0 8px 15px -9px color-mix(in srgb,var(--ci-acento) 45%,transparent) !important;
}
html body #expedienteContenido .instrumento-etapa-accion span { background:var(--ci-tinte) !important; flex-shrink:0; }
@media(max-width:1100px) and (min-width:861px) {
  html body #expedienteContenido .instrumento-etapas { gap:18px; }
  html body #expedienteContenido .instrumento-etapa { padding:23px; }
}
@media(max-width:860px) {
  html body #expedienteContenido .instrumento-etapas { gap:22px; }
  html body #expedienteContenido .instrumento-etapa { display:grid; grid-template-columns:92px minmax(0,1fr); gap:0 23px; min-height:0; padding:26px; }
  html body #expedienteContenido .instrumento-etapa-icono { width:92px; height:98px; margin:0; border-radius:25px; }
  html body #expedienteContenido .instrumento-etapa-icono svg { width:78px !important; height:78px !important; }
  html body #expedienteContenido .instrumento-etapa-numero { justify-self:start; }
  html body #expedienteContenido .instrumento-etapa h2 { margin:12px 0 9px; }
  html body #expedienteContenido .instrumento-etapa p { margin:0; }
  html body #expedienteContenido .instrumento-etapa-accion { margin-top:20px; }
}
@media(max-width:480px) {
  html body #expedienteContenido .instrumento-etapa { grid-template-columns:76px minmax(0,1fr); column-gap:16px; padding:24px; border-radius:28px; }
  html body #expedienteContenido .instrumento-etapa-icono { grid-row:1 / 3; width:76px; height:82px; border-radius:22px; }
  html body #expedienteContenido .instrumento-etapa-icono svg { width:67px !important; height:67px !important; }
  html body #expedienteContenido .instrumento-etapa-numero { font-size:9px; padding:6px 7px; letter-spacing:.05em; }
  html body #expedienteContenido .instrumento-etapa h2 { font-size:28px; margin:9px 0 0; }
  html body #expedienteContenido .instrumento-etapa p { grid-column:1 / -1; margin-top:22px; }
  html body #expedienteContenido .instrumento-etapa-accion { grid-column:1 / -1; }
}

/* --- Sin franjas de color arriba ---------------------------------------
   Las cards del resumen de la Biblioteca llevaban una franja degradada en
   el borde superior. El usuario la descartó: es un recurso que delata un
   diseño genérico. Ninguna card lleva acento superior. */
html body #principal .resumen-card::before { display: none !important; content: none !important; }

/* --- Movimiento ------------------------------------------------------- */
@media (hover: hover) {
  html body #principal :is(.tema-card:not(.bibdash-tema), .doc-card:not(.bibdash-doc)):hover {
    border-color: #dbe7f7 !important;
    box-shadow: var(--ci-sombra-hover) !important;
    transform: translateY(-3px) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body #principal :is(.tema-card, .doc-card, .instrumento-etapa):hover { transform: none !important; }
}

/* --- Pantallas estrechas ---------------------------------------------- */
@media (max-width: 620px) {
  html body #principal .doc-card:not(.bibdash-doc) { grid-template-columns: 56px minmax(0, 1fr) !important; gap: 16px !important; padding: 20px !important; }
  html body #principal .doc-card:not(.bibdash-doc) .doc-card-icono { width: 56px; height: 62px; border-radius: 16px; }
  html body #principal .doc-card:not(.bibdash-doc) .doc-card-icono svg { width: 48px; height: 48px; }
  html body #principal .doc-card:not(.bibdash-doc) h3 { font-size: 17px !important; }
  html body #principal #vista-buscar .top5 { padding: 20px !important; }
}