/* ============================================================================
   fp-cano.css — capa fina sobre Mazer (MIT).

   Dos trabajos y nada más:
   1. Poner el azul de Full Partituras donde Mazer trae el suyo (#435ebe).
   2. Traducir las clases de Bootstrap 3 / gentelella que usan las 42 plantillas
      del panel, para que hereden el aspecto de Mazer sin reescribirlas.

   Todo lo demás —tarjetas, tablas, botones, formularios, barra lateral— lo pone
   Mazer. Aquí no se redefine nada de eso.
   ========================================================================= */

:root {
  --bs-primary: #0058be;
  --bs-primary-rgb: 0, 88, 190;
  --bs-link-color: #0058be;
  --bs-link-hover-color: #0049a0;
  --fp-azul: #0058be;
  --fp-azul-osc: #0049a0;
}

/* --- el azul de Mazer sustituido por el nuestro --- */
.btn-primary, .bg-primary { background-color: var(--fp-azul) !important; border-color: var(--fp-azul) !important; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--fp-azul-osc) !important; border-color: var(--fp-azul-osc) !important;
}
.btn-outline-primary { color: var(--fp-azul); border-color: var(--fp-azul); }
.btn-outline-primary:hover { background-color: var(--fp-azul); border-color: var(--fp-azul); color: #fff; }
.text-primary { color: var(--fp-azul) !important; }
a { color: var(--fp-azul); }
a:hover { color: var(--fp-azul-osc); }
.form-control:focus, .form-select:focus {
  border-color: var(--fp-azul); box-shadow: 0 0 0 .2rem rgba(0, 88, 190, .15);
}
.page-item.active .page-link { background-color: var(--fp-azul); border-color: var(--fp-azul); }
.page-link { color: var(--fp-azul); }
/* El elemento activo: al pintarle el fondo azul hay que aclarar tambien el texto
   y el icono, o queda azul oscuro sobre azul (ilegible). */
.sidebar-wrapper .menu .sidebar-item.active > .sidebar-link,
.sidebar-wrapper .menu .sidebar-item.active > .sidebar-link:hover {
  background: var(--fp-azul) !important;
  color: #fff !important;
}
.sidebar-wrapper .menu .sidebar-item.active > .sidebar-link i,
.sidebar-wrapper .menu .sidebar-item.active > .sidebar-link span {
  color: #fff !important;
}
.sidebar-wrapper .menu .sidebar-item.active > .sidebar-link::before { background: transparent !important; }
.sidebar-wrapper .menu .sidebar-link:hover { color: var(--fp-azul); }
.stats-icon.blue { background: linear-gradient(90deg, #0058be, #2a7fe0); }
.progress-bar { background-color: var(--fp-azul); }

/* --- marca en la barra lateral (Mazer trae una imagen; aquí es texto) --- */
.fp-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 1.15rem; font-weight: 700; color: #25396f; text-decoration: none; letter-spacing: -.02em;
}
.fp-logo strong { color: var(--fp-azul); font-weight: 800; }
.fp-logo-ic {
  width: 34px; height: 34px; border-radius: 9px; background: var(--fp-azul); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
}

/* ============================================================================
   COMPATIBILIDAD — Bootstrap 3 / gentelella hacia el aspecto de Mazer
   ========================================================================= */

/* gentelella: sus tarjetas son x_panel / x_title / x_content (75 usos) */
.x_panel {
  background: #fff; border: 0; border-radius: .5rem;
  box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .06);
  padding: 1.5rem; margin-bottom: 1.5rem;
}
.x_title {
  display: flex; align-items: center; gap: .75rem;
  border-bottom: 1px solid #eaecf1; padding-bottom: 1rem; margin-bottom: 1.25rem;
}
.x_title h2, .x_title h3 { font-size: 1.1rem; font-weight: 700; margin: 0; color: #25396f; }
.x_title small { color: #8898aa; font-weight: 400; }
.x_title .nav, .x_title .pull-right { margin-left: auto; }
.x_content { padding: 0; }

/* Bootstrap 3: panel (33 usos) */
.panel {
  background: #fff; border: 0; border-radius: .5rem;
  box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .06); margin-bottom: 1.5rem;
}
.panel > .panel-heading {
  padding: 1.1rem 1.5rem; border-bottom: 1px solid #eaecf1;
  font-weight: 700; color: #25396f; background: none;
}
.panel > .panel-body { padding: 1.5rem; }

/* form-group ya no existe en Bootstrap 5 (20 usos) */
.form-group { margin-bottom: 1.1rem; }
.form-group > label, .control-label {
  display: block; font-size: .85rem; font-weight: 600; color: #4b5768; margin-bottom: .4rem;
}
select.form-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237c8aa0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right .8rem center;
  background-size: 15px 11px; padding-right: 2.3rem; appearance: none;
}
.checkbox, .radio { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.checkbox label, .radio label { margin: 0; font-weight: 400; display: inline; }
.checkbox input, .radio input { margin: 0; width: auto; }

/* etiquetas: en Bootstrap 5 son badge (18 usos de label-*) */
.label {
  display: inline-block; padding: .35rem .6rem; border-radius: .35rem;
  font-size: .75rem; font-weight: 600; line-height: 1.2;
}
.label-success { background: #dcf5e9; color: #0b7a5b; }
.label-danger  { background: #fce4e4; color: #b93232; }
.label-warning { background: #fdf2de; color: #96650a; }
.label-info, .label-primary { background: #e3eefb; color: var(--fp-azul); }
.label-default { background: #eef0f4; color: #64748b; }
.badge.bg-green  { background: #dcf5e9 !important; color: #0b7a5b !important; }
.badge.bg-orange { background: #fdf2de !important; color: #96650a !important; }

/* botones que Bootstrap 5 ya no trae (31 usos de btn-default) */
.btn-default {
  background: #fff; border: 1px solid #dfe3ea; color: #4b5768;
}
.btn-default:hover { border-color: var(--fp-azul); color: var(--fp-azul); }
.btn-xs { padding: .15rem .55rem; font-size: .75rem; border-radius: .3rem; }
.btn-success { background: #0f9d76; border-color: #0f9d76; }
.btn-success:hover { background: #0c8763; border-color: #0c8763; }

/* utilidades renombradas en Bootstrap 5 */
.pull-right { float: right; } .pull-left { float: left; }
.text-right { text-align: right; } .text-left { text-align: left; }
.hidden { display: none !important; }
.img-responsive { max-width: 100%; height: auto; }
.well { background: #f8fafc; border: 1px solid #eaecf1; border-radius: .5rem; padding: 1.15rem; margin-bottom: 1.3rem; }
.input-group-btn { display: flex; }
.input-group-btn > .btn { border-radius: 0 .4rem .4rem 0; }

/* tablas sueltas (sin clase .table) para que no salgan desnudas */
table:not(.table) { width: 100%; border-collapse: collapse; }
table:not(.table) th {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #8898aa; border-bottom: 1px solid #eaecf1; padding: .75rem; text-align: left; white-space: nowrap;
}
table:not(.table) td { padding: .8rem .75rem; border-bottom: 1px solid #f2f4f7; vertical-align: middle; }
.table > thead > tr > th {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8898aa;
}
.table-bordered, .table-bordered > :not(caption) > * > * { border: 0 !important; }
.table-bordered > tbody > tr > td { border-bottom: 1px solid #f2f4f7 !important; }

/* paginacion de CakePHP */
.paginator .pagination { display: flex; gap: .3rem; list-style: none; padding: 0; margin: 1.25rem 0 0; flex-wrap: wrap; }
.paginator .pagination > li { list-style: none; }
.paginator .pagination > li > a, .paginator .pagination > li > span {
  display: flex; align-items: center; justify-content: center;
  min-width: 2.2rem; height: 2.2rem; padding: 0 .6rem;
  border: 1px solid #e6e9ef; border-radius: .4rem; background: #fff;
  color: #4b5768; font-size: .85rem; font-weight: 600;
}
.paginator .pagination > li > a:hover { border-color: var(--fp-azul); color: var(--fp-azul); }
.paginator .pagination > .active > a, .paginator .pagination > .active > span {
  background: var(--fp-azul); border-color: var(--fp-azul); color: #fff;
}
.paginator p { color: #8898aa; font-size: .85rem; margin-top: .6rem; }

/* mensajes de CakePHP */
.message { border-radius: .5rem; padding: .9rem 1.1rem; margin-bottom: 1.2rem; font-size: .9rem; border: 1px solid;
  background: #e3eefb; border-color: #c5dcf6; color: var(--fp-azul); }
.message.success { background: #dcf5e9; border-color: #aee4cf; color: #0b7a5b; }
.message.error   { background: #fce4e4; border-color: #f3c2c2; color: #b93232; }

/* restos del marcado viejo que no deben verse */
#featureWrap > li[style*="display:none"], #featureWrap > li { list-style: none; }
.title_right { float: none !important; width: auto !important; margin-bottom: 1rem; }
.navbar-form { padding: 0; margin: 0; border: 0; box-shadow: none; }
.navbar-right { float: none !important; }

/* FontAwesome sigue en uso en las 42 plantillas */
.fa { line-height: inherit; }

/* ============================================================================
   LISTADOS — respiro y acciones en iconos
   El dueno lo dijo claro: "se ve todo junto, como sin separacion". Las filas
   iban apretadas y las cuatro acciones salian como texto corrido
   ("Ver Editar Borrar Restringir").
   ========================================================================= */

.card > .card-header {
  padding: 1.4rem 1.6rem 0; border: 0; background: none;
  display: flex; align-items: flex-start; gap: 1rem;
}
.card > .card-header h4 { font-size: 1.1rem; font-weight: 700; color: #25396f; margin: 0; }
.card > .card-header .sub { font-size: .82rem; color: #8898aa; margin-top: .15rem; }
.card > .card-body { padding: 1.5rem 1.6rem; }
.card > .card-header + .card-body { padding-top: 1.1rem; }

/* la barra de filtros, separada de la tabla */
.fp-filtros { padding: 1.1rem 1.6rem; border-bottom: 1px solid #eef1f6; }

/* tabla con aire: antes las filas iban pegadas */
.card .table { margin-bottom: 0; }
.card .table > thead > tr > th {
  padding: .85rem 1rem; background: #f8fafc; border-bottom: 1px solid #eef1f6;
  font-size: .7rem; letter-spacing: .05em; color: #8898aa; white-space: nowrap;
}
.card .table > thead > tr > th:first-child,
.card .table > tbody > tr > td:first-child { padding-left: 1.6rem; }
.card .table > thead > tr > th:last-child,
.card .table > tbody > tr > td:last-child { padding-right: 1.6rem; }
.card .table > tbody > tr > td {
  padding: 1rem; border-bottom: 1px solid #f2f4f7; vertical-align: middle; font-size: .875rem;
}
.card .table > tbody > tr:last-child > td { border-bottom: 0; }
.card .table > tbody > tr:hover { background: #f8fbff; }
.fp-sub { font-size: .78rem; color: #8898aa; margin-top: .15rem; }

/* pie de la tarjeta con el contador y la paginacion */
.fp-pie {
  padding: 1.1rem 1.6rem; border-top: 1px solid #eef1f6; background: #fcfdfe;
  display: flex; align-items: center; flex-wrap: wrap; gap: .8rem;
}
.fp-pie .cuenta { font-size: .85rem; color: #8898aa; margin: 0; }
.fp-pie .pagination { margin: 0 0 0 auto; gap: .3rem; }
.fp-pie .pagination > li { list-style: none; }
.fp-pie .pagination > li > a, .fp-pie .pagination > li > span {
  display: flex; align-items: center; justify-content: center;
  min-width: 2.2rem; height: 2.2rem; padding: 0 .6rem;
  border: 1px solid #e6e9ef; border-radius: .45rem; background: #fff;
  color: #4b5768; font-size: .85rem; font-weight: 600;
}
.fp-pie .pagination > li > a:hover { border-color: var(--fp-azul); color: var(--fp-azul); }
.fp-pie .pagination > .active > a, .fp-pie .pagination > .active > span {
  background: var(--fp-azul); border-color: var(--fp-azul); color: #fff;
}

/* ACCIONES EN ICONOS: cuadradas, separadas y con su color propio */
.fp-acciones { display: flex; gap: .35rem; justify-content: flex-end; }
.fp-acciones > a, .fp-acciones > form { margin: 0; }
.fp-acciones a, .fp-acciones button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: .45rem;
  border: 1px solid #e2e7ef; background: #fff; color: #64748b;
  font-size: .9rem; line-height: 1; cursor: pointer;
  transition: background .13s, border-color .13s, color .13s;
}
.fp-acciones a:hover, .fp-acciones button:hover { border-color: var(--fp-azul); color: var(--fp-azul); background: #f4f8fe; }
.fp-acciones .ac-borrar:hover { border-color: #e05252; color: #e05252; background: #fdf4f4; }
.fp-acciones .ac-ok:hover { border-color: #12a37a; color: #12a37a; background: #f2fbf8; }
.fp-acciones .ac-aviso:hover { border-color: #e08b00; color: #e08b00; background: #fdf9f1; }

/* estado vacio */
.fp-vacio { text-align: center; padding: 3.5rem 1.5rem; }
.fp-vacio i { font-size: 2.2rem; color: #c9d2de; display: block; margin-bottom: .8rem; }
.fp-vacio h5 { font-weight: 700; color: #25396f; margin-bottom: .35rem; }
.fp-vacio p { color: #8898aa; font-size: .9rem; margin-bottom: 1.1rem; }

/* iniciales de usuario */
.fp-ini {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .82rem; color: #fff; text-transform: uppercase;
}

/* El contador se montaba encima de la flecha del desplegable: se le deja sitio. */
.sidebar-item.has-sub > .sidebar-link .badge { margin-right: 1.5rem; }
.sidebar-item > .sidebar-link .badge {
  font-size: .68rem; font-weight: 700; padding: .2rem .45rem;
  border-radius: 999px; min-width: 1.25rem; line-height: 1.15;
}
.sidebar-item.active > .sidebar-link .badge { background: rgba(255,255,255,.28) !important; color: #fff !important; }

/* Pestañas de filtro (moderación de comentarios y del foro): antes eran botones
   sueltos y no se distinguía cuál estaba activa. */
.fp-pestanas { display: flex; flex-wrap: wrap; gap: .4rem; }
.fp-pestanas a {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem; border-radius: .5rem;
  border: 1px solid #e2e7ef; background: #fff; color: #5b6b7a;
  font-size: .85rem; font-weight: 600; text-decoration: none;
  transition: all .13s;
}
.fp-pestanas a:hover { border-color: var(--fp-azul); color: var(--fp-azul); }
.fp-pestanas a.activa { background: var(--fp-azul); border-color: var(--fp-azul); color: #fff; }
.fp-pestanas .cnt {
  background: #eef1f6; color: #64748b; border-radius: 999px;
  padding: .05rem .45rem; font-size: .72rem; font-weight: 700;
}
.fp-pestanas a.activa .cnt { background: rgba(255,255,255,.28); color: #fff; }

/* Texto largo dentro de una celda: que no estire la fila. */
.fp-texto {
  font-size: .85rem; line-height: 1.5; color: #4b5768;
  max-height: 4.5em; overflow: hidden;
}

/* Barra de acciones en lote (moderación del foro): oculta hasta que marcas algo. */
.fp-lote {
  display: none; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .9rem 1.6rem; background: #eef4fd; border-bottom: 1px solid #d9e6f8;
}
.fp-lote.on { display: flex; }
.fp-lote strong { color: var(--fp-azul); font-size: .88rem; }
.fp-acciones button.ac-ok { border-color: #cdeee2; color: #12a37a; }

/* ============================================================================
   FORMULARIOS — antes eran listas planas de campos sin agrupar ni explicar
   ========================================================================= */
.fp-campo { margin-bottom: 1.15rem; }
.fp-campo:last-child { margin-bottom: 0; }
.fp-campo > label {
  display: block; font-size: .84rem; font-weight: 600; color: #4b5768; margin-bottom: .4rem;
}
.fp-campo > label .req { color: #e05252; }
.fp-campo .form-control, .fp-campo .form-select { width: 100%; }
.fp-campo textarea.form-control { min-height: 92px; line-height: 1.55; }
.fp-ayuda { font-size: .78rem; color: #8898aa; margin-top: .35rem; line-height: 1.45; }

/* CakePHP envuelve cada campo en .input; se neutraliza para que mande .fp-campo */
.fp-form .input { margin: 0; }
.fp-form .input > label { display: none; }
.fp-form .input.error .form-control { border-color: #e05252; }
.fp-form .error-message {
  font-size: .78rem; color: #e05252; margin-top: .3rem; display: block;
}

/* input() envuelve el campo en .input; el margen lo pone .fp-campo */
.fp-campo .input, .fp-form .input { margin: 0; }
.fp-campo .input > label:not(.form-check-label) { display: none; }
.fp-campo .error-message { color: #d6455d; font-size: .78rem; margin-top: .3rem; }
.fp-campo .form-control.form-error, .fp-campo .form-select.form-error { border-color: #d6455d; }

/* Estado: conmutadores. La etiqueta envuelve al input (asi lo pinta CakePHP). */
.fp-interruptor { margin-bottom: .7rem; }
.fp-interruptor label {
  display: flex; align-items: center; gap: .65rem; margin: 0; cursor: pointer;
  font-weight: 600; font-size: .88rem; color: #4b5768;
}
.fp-interruptor input[type=checkbox] { flex: 0 0 auto; margin: 0; cursor: pointer; }
.fp-interruptor.form-switch { padding-left: 0; }
.fp-interruptor.form-switch input[type=checkbox] { width: 2.4rem; height: 1.25rem; }

.input-group-text {
  background: #f4f6fa; border: 1px solid #dfe3ea; border-right: 0;
  color: #8898aa; font-size: .85rem; padding: 0 .8rem; display: flex; align-items: center;
  border-radius: .4rem 0 0 .4rem; white-space: nowrap;
}
.input-group .form-control { border-radius: 0 .4rem .4rem 0; }

/* barra de guardar, pegada abajo para no perderla en formularios largos */
.fp-guardar {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: #fff; border: 1px solid #e6eaf0; border-radius: .5rem;
  padding: 1rem 1.25rem; margin-bottom: 1.5rem;
  position: sticky; bottom: 1rem; z-index: 5;
  box-shadow: 0 .3rem 1rem rgba(16, 24, 40, .08);
}

/* ============================================================================
   FICHAS — pares etiqueta/valor, en vez de tablas de doce filas
   ========================================================================= */
.fp-dato {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid #f2f4f7;
}
.fp-dato:last-child { border-bottom: 0; padding-bottom: 0; }
.fp-dato:first-child { padding-top: 0; }
.fp-dato .et {
  flex: 0 0 128px; font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: #8898aa;
}
.fp-dato .va { flex: 1; min-width: 0; color: #25396f; font-size: .9rem; }
.fp-dato--bloque { flex-direction: column; gap: .5rem; }
.fp-dato--bloque .et { flex: none; }
.fp-dato--bloque .va { line-height: 1.6; color: #4b5768; }

.fp-cifra { margin-bottom: 1rem; }
.fp-cifra .n {
  display: block; font-size: 1.9rem; font-weight: 700; line-height: 1.1;
  color: #25396f; letter-spacing: -.02em;
}
.fp-cifra .l { font-size: .8rem; color: #8898aa; }

/* Tarjetas de "requiere tu atención": las que tienen algo se marcan. */
.fp-pendiente {
  display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem;
  border: 1px solid #e6eaf0; border-radius: .55rem; background: #fbfcfe;
  text-decoration: none; transition: all .14s; height: 100%;
}
.fp-pendiente i { font-size: 1.4rem; color: #b9c3d1; }
.fp-pendiente .num { display: block; font-size: 1.5rem; font-weight: 700; color: #8898aa; line-height: 1.15; }
.fp-pendiente .txt { font-size: .82rem; color: #8898aa; }
.fp-pendiente.hay { border-color: #f4d2d2; background: #fef8f8; }
.fp-pendiente.hay i { color: #e05252; }
.fp-pendiente.hay .num { color: #c93b3b; }
.fp-pendiente.hay .txt { color: #8b5a5a; }
.fp-pendiente:hover { border-color: var(--fp-azul); background: #f6f9fe; }

/* Asa para arrastrar filas. */
.fp-agarre { cursor: grab; color: #c3ccd8; text-align: center; }
.fp-agarre:active { cursor: grabbing; }
.fp-agarre i { font-size: 1.05rem; }

/* Aviso destacado: lo importante antes de pulsar, no en gris al final. */
.fp-aviso {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .9rem 1.1rem; border-radius: .5rem; margin-bottom: 1.1rem;
  font-size: .875rem; line-height: 1.5; border: 1px solid;
}
.fp-aviso i { font-size: 1.05rem; flex: 0 0 auto; margin-top: .1rem; }
.fp-aviso--ojo { background: #fdf6ec; border-color: #f2ddb8; color: #8a5b06; }
.fp-aviso--info { background: #eef4fd; border-color: #cfe0f7; color: #0058be; }

/* Cifra pequeña para bloques de resumen. */
.fp-mini { text-align: center; padding: .8rem .4rem; background: #f8fafc; border-radius: .5rem; }
.fp-mini .n { display: block; font-size: 1.25rem; font-weight: 700; color: #25396f; line-height: 1.2; }
.fp-mini .l { font-size: .72rem; color: #8898aa; }

.fp-lista-doble { columns: 2; -webkit-columns: 2; margin: 0; padding-left: 1.2rem; }
.fp-lista-doble li { font-size: .875rem; color: #4b5768; margin-bottom: .35rem; break-inside: avoid; }
@media (max-width: 700px) { .fp-lista-doble { columns: 1; } }

/* Etiqueta de color con su aspa para quitarla (prefijos, palabras bloqueadas). */
.fp-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .6rem; border-radius: .4rem;
  color: #fff; font-size: .78rem; font-weight: 600;
}
.fp-chip .x, .fp-chip form { display: inline; margin: 0; }
.fp-chip a { color: rgba(255,255,255,.75); text-decoration: none; font-weight: 700; line-height: 1; }
.fp-chip a:hover { color: #fff; }
.form-control-color { padding: .2rem; height: 38px; border: 1px solid #dfe3ea; border-radius: .4rem; }


/* Panel: el punto que late junto a "en linea ahora" */
.fp-punto {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #12a37a; margin-right: .35rem; vertical-align: middle;
  animation: fp-late 2s ease-in-out infinite;
}
@keyframes fp-late { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

/* Panel: la variacion contra ayer, al lado de cada cifra */
.fp-var {
  font-size: .75rem; font-weight: 700; color: #8898aa; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .1rem;
}
.fp-var.sube { color: #12a37a; }
.fp-var.baja { color: #d6455d; }
.fp-var i { font-size: .7rem; }


/* El icono, exactamente en el centro de su caja de color: sin line-height
   heredado que lo desplace respecto a la linea base. */
.stats-icon i { line-height: 1; display: block; }


/* ------------------------------------------------------------------
   Alineacion de los iconos (Bootstrap Icons)

   Mazer pisa el valor de la libreria con `vertical-align: sub`, que baja el
   glifo 3,2px dentro de un cuadro de 48px. Se devuelve el valor oficial para
   los iconos que acompanan a texto...
   ------------------------------------------------------------------ */
body .bi::before,
body [class^="bi-"]::before,
body [class*=" bi-"]::before { vertical-align: -.125em; }

/* ...y baseline donde el icono va solo y centrado dentro de su caja, que es
   donde cualquier desvio se nota. */
.stats-icon i::before,
.fp-acciones a::before, .fp-acciones button::before,
.fp-acciones a > i::before, .fp-acciones button > i::before,
.sidebar-link > i::before,
.btn-icon > i::before,
.fp-vacio > i::before,
.fp-ini > i::before { vertical-align: baseline; }

.stats-icon i { line-height: 1; display: block; }
.fp-acciones a, .fp-acciones button { display: inline-flex; align-items: center; justify-content: center; }
.fp-acciones i { line-height: 1; }


/* ------------------------------------------------------------------
   Filas de altura pareja.

   Una .row de Bootstrap ya estira sus columnas, pero la .card de dentro
   no crece con ellas: se queda a la altura de su contenido y deja el
   borde inferior escalonado. Haciendo la columna un contenedor flexible,
   la tarjeta llena el hueco y todas acaban a la misma altura.
   ------------------------------------------------------------------ */
.fp-fila > [class*="col-"] { display: flex; }
.fp-fila > [class*="col-"] > .card { width: 100%; }

/* Que el contenido reparta el aire en vez de amontonarse arriba */
.fp-fila .card-body { display: flex; flex-direction: column; }
.fp-fila .card-body > .fp-abajo { margin-top: auto; }

/* Listas de "lo mas descargado": misma pinta aunque una traiga 3 filas y
   otra 7, para que no se noten los escalones */
.fp-lista { display: flex; flex-direction: column; gap: .85rem; }
.fp-lista .fila { display: flex; flex-direction: column; gap: .3rem; }
.fp-lista .cab { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; }
.fp-lista .cab .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-lista .cab .v { font-weight: 700; flex: 0 0 auto; }

/* Pares etiqueta/valor, que se repiten en media docena de tarjetas */
.fp-par { display: flex; justify-content: space-between; align-items: baseline;
          padding: .3rem 0; font-size: .86rem; }
.fp-par + .fp-par { border-top: 1px solid #f2f5f9; }
.fp-par .v { font-weight: 700; }
.fp-par .s { color: #8898aa; font-size: .75rem; font-weight: 400; }
.fp-par.sangra .e { color: #8898aa; padding-left: .9rem; }