/* ============================================================================
   TARJETAS — proporción, escala y aire

   Auditoría hecha midiendo, en cada vista, la distancia real de cada texto al
   borde de su tarjeta. Tres problemas de fondo:

   1. TEXTO PEGADO AL BORDE. Cuatro contenedores llevaban borde, fondo y radio
      —es decir, se ven como tarjeta— con relleno 0: el texto quedaba a 1 px
      del borde. Eran `.resumen-bloque`, `.exp-bloque`, `.catalogo > *` y las
      filas del tablero.

   2. RADIO DESPROPORCIONADO. apple-light.css aplica el mismo radio de 22 px a
      todo. En una fila de 77 px de alto eso es una pastilla; en un panel de
      620 px se queda corto. Aquí el radio va con el tamaño: 12 para filas,
      16 para tarjetas, 20 para paneles. Es también lo que documenta DESIGN.md
      (6 / 10 / 16), de lo que la hoja clara se había alejado.

   3. RELLENO QUE NO LIBRA LA CURVA. Con radio 22 y relleno 16 el texto entra
      en la esquina redondeada. La regla que se aplica aquí es relleno ≥ radio.

   Y una infracción de estructura: TARJETAS ANIDADAS. `.resumen-bloque` dentro
   de `.resumen`, y las tarjetas de tema dentro del panel de temas. Una tarjeta
   dentro de otra no aporta jerarquía, solo ruido de bordes. Las de dentro
   pasan a ser secciones separadas por filete.

   Las sombras y los filetes dejan de ser negro neutro y se tiñen del azul
   institucional, como pide DESIGN.md.
   ========================================================================== */

:root{
  /* Radio según el tamaño de la pieza, no uno para todo. */
  --carta-radio-fila:12px;
  --carta-radio:16px;
  --carta-radio-panel:20px;

  /* Filetes y sombras teñidos hacia --azul-900 (#0b2740). */
  --carta-linea:rgba(11,39,64,.12);
  --carta-linea-viva:rgba(11,39,64,.24);
  --carta-sombra:0 1px 2px rgba(11,39,64,.05),0 10px 24px -14px rgba(11,39,64,.16);
  --carta-sombra-alta:0 2px 4px rgba(11,39,64,.07),0 18px 34px -16px rgba(11,39,64,.2);
}

/* ---------------------------------------------------------------------- */
/* 1. Filas: piezas de menos de 100 px de alto                             */
/*    Radio 12, relleno 14/18. Antes: radio 14 con relleno 10.              */
/* ---------------------------------------------------------------------- */

.rel-item,
.aviso,
.admin-fila{
  padding:14px 18px;
  border-radius:var(--carta-radio-fila);
  border-color:var(--carta-linea);
}

/* La fila de documento del tablero trae `!important` de apple-light.css en
   relleno y radio, así que hay que responder en el mismo tono. */
.tablero button.bibdash-doc{
  padding:14px 18px!important;
  border-radius:var(--carta-radio-fila)!important;
  box-shadow:none;
}

/* Escala interna de esa fila: 9 px es demasiado poco para un rótulo, y el
   título necesitaba separarse más del resto para leerse como el dato principal. */
.bibdash-doc-cuerpo > small,
.bibdash-doc-articulos small{font-size:10px}
.bibdash-doc-cuerpo > span{font-size:11px}
.bibdash-doc-cuerpo > strong{font-size:14px}

/* ---------------------------------------------------------------------- */
/* 2. Tarjetas: entre 100 y 360 px de alto                                 */
/* ---------------------------------------------------------------------- */

.doc-card,
.tema-card,
.bibdash-kpi,
.exp-bloque,
.catalogo > *{
  border-radius:var(--carta-radio);
  border-color:var(--carta-linea);
  box-shadow:var(--carta-sombra);
}

.doc-card{padding:20px 24px}
.tema-card{padding:22px 24px}
.bibdash-kpi{padding:24px}

/* Estos dos venían con relleno 0 y el texto tocaba el filete. */
.exp-bloque,
.catalogo > *{padding:22px 24px}

.doc-card:hover,
.tema-card:hover,
.admin-fila:hover{
  border-color:var(--carta-linea-viva);
  box-shadow:var(--carta-sombra-alta);
}

/* ---------------------------------------------------------------------- */
/* 3. Paneles: contenedores de sección                                     */
/* ---------------------------------------------------------------------- */

.bibdash-panel,
.resumen,
.mapa-marco,
.admin-form{
  border-radius:var(--carta-radio-panel);
  border-color:var(--carta-linea);
  box-shadow:var(--carta-sombra);
}
.bibdash-panel{padding:26px 28px}
.resumen{padding:26px 28px;gap:26px}
.admin-form{padding:24px 26px}

/* ---------------------------------------------------------------------- */
/* 4. Tarjetas anidadas                                                    */
/* ---------------------------------------------------------------------- */

/* 4.1 Los bloques del resumen eran tarjetas dentro de la tarjeta del
       resumen, y además sin relleno. Pasan a ser columnas separadas por un
       filete, que es lo que de verdad son. */
.resumen .resumen-bloque{
  padding:2px 0 0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
@media (min-width:1081px){
  .resumen .resumen-bloque + .resumen-bloque{
    padding-left:26px;
    border-left:1px solid var(--carta-linea);
  }
}
@media (max-width:1080px){
  .resumen .resumen-bloque + .resumen-bloque{
    padding-top:22px;
    border-top:1px solid var(--carta-linea);
  }
}

/* 4.2 Lo mismo con los temas del tablero: filas dentro del panel, no
       tarjetas con marco propio. El realce lo da el fondo al pasar. */
.tablero .bibdash-temas-panel button.bibdash-tema{
  padding:15px 16px!important;
  border:1px solid transparent!important;
  border-radius:var(--carta-radio-fila)!important;
  background:transparent!important;
  box-shadow:none!important;
  transition:background var(--transicion,.16s cubic-bezier(.32,.72,0,1));
}
.tablero .bibdash-temas-panel button.bibdash-tema:hover{
  border-color:transparent!important;
  background:rgba(11,39,64,.055)!important;
  transform:none;
}

/* El tema sugerido sí conserva filete, y punteado. Al quitárselo a los demás,
   el borde deja de ser adorno repetido y pasa a significar algo: aquí hay una
   sugerencia, no una entrada del corpus. */
.tablero .bibdash-temas-panel button.bibdash-tema-sugerido{
  border-color:var(--carta-linea)!important;
  border-style:dashed!important;
}

/* Escala del tema: 13 y 10 px quedaban por debajo de lo cómodo. */
.bibdash-tema strong{font-size:14px}
.bibdash-tema small{font-size:11px}

/* ---------------------------------------------------------------------- */
/* 5. Pastillas y rótulos                                                  */
/*    2 px de relleno vertical dejan el texto tocando el fondo de color.    */
/* ---------------------------------------------------------------------- */

.pastilla,
.doc-card-tipo,
.chip-filtro,
.tema-tag{
  padding:4px 11px;
  border-radius:999px;
  line-height:1.45;
}

/* ---------------------------------------------------------------------- */
/* 6. Pantallas estrechas                                                  */
/*    El relleno baja, pero nunca por debajo del radio: es la condición que */
/*    mantiene el texto fuera de la esquina curva.                          */
/* ---------------------------------------------------------------------- */

@media (max-width:720px){
  :root{
    --carta-radio-fila:12px;
    --carta-radio:14px;
    --carta-radio-panel:16px;
  }
  .doc-card{padding:16px 18px}
  .tema-card{padding:18px 18px}
  .bibdash-kpi{padding:18px}
  .exp-bloque,
  .catalogo > *{padding:18px 18px}
  .bibdash-panel{padding:20px 18px}
  .resumen{padding:20px 18px;gap:18px}
  .admin-form{padding:18px}
  .rel-item,
  .aviso,
  .admin-fila{padding:12px 14px}
  /* También con `!important`, si no gana la regla de escritorio. */
  .tablero button.bibdash-doc{padding:12px 14px!important}
}