/* ==========================================================================
   Notular — componentes
   --------------------------------------------------------------------------
   Reescribe los componentes de Bootstrap 4 y de las librerías de terceros
   (DataTables, jQuery Confirm, jQuery UI) con el sistema de marca.

   Se carga DESPUÉS de todo lo demás, porque su trabajo es justamente ganarle
   a Bootstrap sin tener que tocar las 145 vistas una por una: las clases que
   ya usan (`btn-primary`, `card`, `alert-danger`, …) siguen siendo las
   mismas, sólo cambia cómo se ven.

   Mapa de botones (DESIGN.md §5 — todos son píldoras):
     btn-primary / btn-success  → sólido tinta, hover ámbar   (acción principal)
     btn-secondary / btn-warning / btn-info / btn-light
                                → outline suave                (acción secundaria)
     btn-dark                   → outline fuerte
     btn-danger                 → outline rojo, hover sólido   (destructiva)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.btn {
  font-family: var(--ntl-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  padding: .5rem 1.35rem;
  border-radius: var(--ntl-pildora) !important;
  border-width: 1px;
  box-shadow: none !important;
  background-image: none !important;
  transition: color var(--ntl-transicion), background-color var(--ntl-transicion), border-color var(--ntl-transicion);
}
.btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(158, 106, 33, .18) !important; }
.btn:disabled, .btn.disabled { opacity: .4; }

.btn-lg { font-size: 15px; padding: .7rem 1.9rem; }
.btn-sm { font-size: 13px; padding: .35rem 1rem; }

/* Sólido — la acción principal de la pantalla */
.btn-primary,
.btn-success {
  color: var(--ntl-crema) !important;
  background-color: var(--ntl-tinta) !important;
  border-color: var(--ntl-tinta) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active,
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success:not(:disabled):not(.disabled):active {
  color: var(--ntl-crema) !important;
  background-color: var(--ntl-ambar) !important;
  border-color: var(--ntl-ambar) !important;
}

/* Outline suave — la acción secundaria */
.btn-secondary,
.btn-warning,
.btn-info,
.btn-light,
.btn-outline-secondary {
  color: var(--ntl-tinta) !important;
  background-color: transparent !important;
  border-color: var(--ntl-lino-oscuro) !important;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary:not(:disabled):not(.disabled):active,
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning:not(:disabled):not(.disabled):active,
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info:not(:disabled):not(.disabled):active,
.btn-light:hover, .btn-light:focus,
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  color: var(--ntl-tinta) !important;
  background-color: transparent !important;
  border-color: var(--ntl-tinta) !important;
}

/* Outline fuerte — se invierte al pasar el mouse */
.btn-dark,
.btn-outline-dark {
  color: var(--ntl-tinta) !important;
  background-color: transparent !important;
  border-color: var(--ntl-tinta) !important;
}
.btn-dark:hover, .btn-dark:focus,
.btn-outline-dark:hover, .btn-outline-dark:focus {
  color: var(--ntl-crema) !important;
  background-color: var(--ntl-tinta) !important;
  border-color: var(--ntl-tinta) !important;
}

/* Destructiva */
.btn-danger,
.btn-outline-danger {
  color: var(--ntl-rojo) !important;
  background-color: transparent !important;
  border-color: var(--ntl-rojo) !important;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:hover, .btn-outline-danger:focus {
  color: var(--ntl-blanco) !important;
  background-color: var(--ntl-rojo) !important;
  border-color: var(--ntl-rojo) !important;
}

/* Enlace disfrazado de botón */
.btn-link {
  color: var(--ntl-ambar) !important;
  border-color: transparent !important;
  background: transparent !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.btn-link:hover { color: var(--ntl-tinta) !important; }

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */

label,
.col-form-label,
.form-check-label {
  font-family: var(--ntl-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ntl-tinta);
  margin-bottom: .35rem;
}

.form-control,
.custom-select,
textarea.form-control {
  font-family: var(--ntl-sans);
  font-size: 14.5px;
  color: var(--ntl-tinta);
  background-color: var(--ntl-blanco);
  border: 1px solid var(--ntl-lino-oscuro);
  border-radius: var(--ntl-radio-chico);
  box-shadow: none;
  padding: .5rem .8rem;
  height: auto;
  transition: border-color var(--ntl-transicion), box-shadow var(--ntl-transicion);
}
.form-control:focus,
.custom-select:focus {
  color: var(--ntl-tinta);
  background-color: var(--ntl-blanco);
  border-color: var(--ntl-ambar);
  box-shadow: 0 0 0 3px rgba(158, 106, 33, .12);
  outline: none;
}
.form-control::placeholder { color: var(--ntl-piedra-clara); opacity: 1; }
.form-control:disabled,
.form-control[readonly] { background-color: var(--ntl-bloque); color: var(--ntl-piedra); }
.form-control.is-invalid { border-color: var(--ntl-rojo); }
.form-control.is-valid   { border-color: var(--ntl-verde); }

.form-control-lg { font-size: 15px; padding: .65rem 1rem; }
.form-control-sm { font-size: 13px; padding: .35rem .65rem; }

/* Los importes y cantidades se leen como dato, no como prosa. */
input[type="number"].form-control,
input.moneda,
input.cantidad {
  font-family: var(--ntl-mono);
  font-variant-numeric: tabular-nums;
}

.form-text,
small.form-text {
  font-size: 12.5px;
  color: var(--ntl-piedra-clara);
}

/* Casillas y radios: el acento es el ámbar. */
.form-check-input,
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--ntl-ambar);
}
.form-check-label { font-weight: 400; color: var(--ntl-piedra); }
.form-check-inline .form-check-label { color: var(--ntl-tinta); }

.input-group-text {
  font-family: var(--ntl-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ntl-piedra);
  background-color: var(--ntl-bloque);
  border: 1px solid var(--ntl-lino-oscuro);
}
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-prepend > .btn { border-radius: var(--ntl-radio-chico) 0 0 var(--ntl-radio-chico); }
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-append > .btn { border-radius: 0 var(--ntl-radio-chico) var(--ntl-radio-chico) 0; }
.input-group > .form-control:not(:last-child) { border-radius: var(--ntl-radio-chico) 0 0 var(--ntl-radio-chico); }
.input-group > .form-control:not(:first-child) { border-radius: 0 var(--ntl-radio-chico) var(--ntl-radio-chico) 0; }

/* El icono de calendario del datepicker, que las vistas ponen como addon. */
.input-group-prepend .input-group-text .fa-calendar,
.input-group-prepend .input-group-text .fas { color: var(--ntl-ambar); }

/* Título de sección. La exclusión de `.col-form-label` es la misma de
   base.css y por el mismo motivo: ahí `legend` es la etiqueta de un campo. */
fieldset legend,
legend:not(.col-form-label) {
  font-size: 1.15rem;
  padding-bottom: .3rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid var(--ntl-lino);
}

/* Un `legend` que hace de etiqueta se ve y pesa como una etiqueta. */
legend.col-form-label {
  font-family: var(--ntl-sans);
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  color: var(--ntl-tinta);
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  line-height: 1.5;
}

.info-icon,
.info-icon .fas { color: var(--ntl-ambar); cursor: help; }

/* --------------------------------------------------------------------------
   Tarjetas
   -------------------------------------------------------------------------- */

.card {
  background-color: var(--ntl-blanco);
  border: 1px solid var(--ntl-lino);
  border-radius: var(--ntl-radio);
  box-shadow: none;
}
.card-header {
  background-color: var(--ntl-bloque);
  border-bottom: 1px solid var(--ntl-lino);
  border-radius: var(--ntl-radio) var(--ntl-radio) 0 0 !important;
  padding: .9rem 1.35rem;
}
.card-footer {
  background-color: var(--ntl-bloque);
  border-top: 1px solid var(--ntl-lino);
  border-radius: 0 0 var(--ntl-radio) var(--ntl-radio) !important;
}
.card-body  { padding: 1.35rem; }
.card-title { font-family: var(--ntl-serif); color: var(--ntl-tinta); }
.card-text  { color: var(--ntl-piedra); }

.rounded    { border-radius: var(--ntl-radio) !important; }
.rounded-sm { border-radius: var(--ntl-radio-chico) !important; }

/* --------------------------------------------------------------------------
   Ventanas modales
   -------------------------------------------------------------------------- */

.modal-content {
  background-color: var(--ntl-blanco);
  border: 1px solid var(--ntl-lino);
  border-radius: var(--ntl-radio);
  box-shadow: none;
}
.modal-header {
  background-color: var(--ntl-bloque);
  border-bottom: 1px solid var(--ntl-lino);
  border-radius: var(--ntl-radio) var(--ntl-radio) 0 0;
  padding: 1rem 1.35rem;
}
.modal-title { font-family: var(--ntl-serif); font-size: 1.3rem; color: var(--ntl-tinta); }
.modal-body  { padding: 1.35rem; color: var(--ntl-piedra); }
.modal-footer {
  background-color: var(--ntl-crema);
  border-top: 1px solid var(--ntl-lino);
  border-radius: 0 0 var(--ntl-radio) var(--ntl-radio);
  padding: .9rem 1.35rem;
}
.modal-header .close {
  color: var(--ntl-piedra);
  opacity: 1;
  text-shadow: none;
  font-weight: 400;
}
.modal-header .close:hover { color: var(--ntl-ambar); }
.modal-backdrop.show { background-color: var(--ntl-tinta); opacity: .45; }

/* --------------------------------------------------------------------------
   Avisos
   -------------------------------------------------------------------------- */

.alert {
  font-size: 14px;
  border-width: 1px;
  border-radius: var(--ntl-radio-chico);
  padding: .8rem 1.05rem;
  box-shadow: none;
}
.alert-danger  { color: var(--ntl-rojo);  background-color: var(--ntl-rojo-suave);  border-color: rgba(180, 70, 47, .28); }
.alert-success { color: var(--ntl-verde); background-color: var(--ntl-verde-suave); border-color: rgba(58, 107, 78, .28); }
.alert-warning { color: var(--ntl-ambar); background-color: var(--ntl-bloque);      border-color: rgba(158, 106, 33, .28); }
.alert-primary,
.alert-info,
.alert-secondary,
.alert-light,
.alert-dark    { color: var(--ntl-tinta); background-color: var(--ntl-bloque);      border-color: var(--ntl-lino); }

.alert-link {
  color: var(--ntl-ambar) !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.alert-link:hover { color: var(--ntl-tinta) !important; }

/* --------------------------------------------------------------------------
   Distintivos
   -------------------------------------------------------------------------- */

.badge {
  font-family: var(--ntl-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--ntl-pildora);
  padding: .35em .8em;
  border: 1px solid transparent;
}
.badge-primary, .badge-dark      { color: var(--ntl-crema); background-color: var(--ntl-tinta); }
.badge-success                   { color: var(--ntl-verde); background-color: var(--ntl-verde-suave); border-color: rgba(58, 107, 78, .28); }
.badge-danger                    { color: var(--ntl-rojo);  background-color: var(--ntl-rojo-suave);  border-color: rgba(180, 70, 47, .28); }
.badge-warning, .badge-info,
.badge-secondary, .badge-light   { color: var(--ntl-piedra); background-color: var(--ntl-bloque); border-color: var(--ntl-lino); }

/* --------------------------------------------------------------------------
   Tablas
   -------------------------------------------------------------------------- */

.table {
  font-size: 14px;
  color: var(--ntl-piedra);
  background-color: transparent;
}
.table thead th {
  font-family: var(--ntl-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ntl-piedra-clara);
  background-color: transparent;
  border-top: 0;
  border-bottom: 1px solid var(--ntl-lino-oscuro);
  padding: .65rem .75rem;
  vertical-align: middle;
}
.table td, .table th {
  border-top: 1px solid var(--ntl-lino);
  padding: .65rem .75rem;
  vertical-align: middle;
}
.table tbody tr:hover { background-color: var(--ntl-bloque); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--ntl-lino); }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(245, 242, 234, .55); }
.table .ntl-dato, .table td.numero, .table td.importe { font-family: var(--ntl-mono); font-variant-numeric: tabular-nums; }
.table.no-border tr td, .table.no-border tr th { border-width: 0; }

/* --------------------------------------------------------------------------
   DataTables (tema bs4)
   -------------------------------------------------------------------------- */

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { font-size: 13px; color: var(--ntl-piedra); }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--ntl-lino-oscuro);
  border-radius: var(--ntl-radio-chico);
  padding: .3rem .6rem;
  background-color: var(--ntl-blanco);
  color: var(--ntl-tinta);
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--ntl-ambar); outline: none; }

.dataTables_wrapper .dataTables_paginate .page-link {
  color: var(--ntl-piedra);
  background-color: transparent;
  border: 1px solid var(--ntl-lino);
  border-radius: var(--ntl-pildora) !important;
  margin: 0 2px;
  font-size: 13px;
}
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
  color: var(--ntl-crema);
  background-color: var(--ntl-tinta);
  border-color: var(--ntl-tinta);
}
.dataTables_wrapper .dataTables_paginate .page-link:hover { color: var(--ntl-ambar); border-color: var(--ntl-lino-oscuro); background-color: transparent; }
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link { color: var(--ntl-lino-oscuro); }

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { color: var(--ntl-piedra-clara); }

.dt-buttons .btn { margin-right: .35rem; }

/* --------------------------------------------------------------------------
   jQuery Confirm — es el diálogo que usan las vistas para términos, avisos
   y confirmaciones de borrado, así que se ve tanto como los modales propios.
   -------------------------------------------------------------------------- */

.jconfirm .jconfirm-box {
  font-family: var(--ntl-sans) !important;
  background-color: var(--ntl-blanco) !important;
  border: 1px solid var(--ntl-lino) !important;
  border-radius: var(--ntl-radio) !important;
  box-shadow: none !important;
  color: var(--ntl-piedra);
}
.jconfirm .jconfirm-title-c,
.jconfirm .jconfirm-title {
  font-family: var(--ntl-serif) !important;
  font-weight: 400 !important;
  font-size: 1.35rem !important;
  color: var(--ntl-tinta) !important;
}
.jconfirm .jconfirm-content { color: var(--ntl-piedra); font-size: 14px; }
.jconfirm .jconfirm-buttons button {
  font-family: var(--ntl-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: var(--ntl-pildora) !important;
  border: 1px solid var(--ntl-lino-oscuro) !important;
  background-color: transparent !important;
  color: var(--ntl-tinta) !important;
  box-shadow: none !important;
  text-transform: none !important;
  padding: .45rem 1.2rem !important;
}
.jconfirm .jconfirm-buttons button:hover { border-color: var(--ntl-tinta) !important; background-color: transparent !important; }
.jconfirm .jconfirm-buttons button.btn-primary,
.jconfirm .jconfirm-buttons button.btn-blue,
.jconfirm .jconfirm-buttons button.btn-green {
  background-color: var(--ntl-tinta) !important;
  border-color: var(--ntl-tinta) !important;
  color: var(--ntl-crema) !important;
}
.jconfirm .jconfirm-buttons button.btn-primary:hover,
.jconfirm .jconfirm-buttons button.btn-blue:hover,
.jconfirm .jconfirm-buttons button.btn-green:hover {
  background-color: var(--ntl-ambar) !important;
  border-color: var(--ntl-ambar) !important;
}
.jconfirm .jconfirm-buttons button.btn-red,
.jconfirm .jconfirm-buttons button.btn-danger {
  color: var(--ntl-rojo) !important;
  border-color: var(--ntl-rojo) !important;
}
.jconfirm.jconfirm-light .jconfirm-bg { background-color: var(--ntl-tinta) !important; }

/* --------------------------------------------------------------------------
   jQuery UI — sólo el datepicker está en uso.
   -------------------------------------------------------------------------- */

.ui-datepicker {
  font-family: var(--ntl-sans);
  font-size: 13px;
  background: var(--ntl-blanco);
  border: 1px solid var(--ntl-lino-oscuro);
  border-radius: var(--ntl-radio-chico);
  box-shadow: none;
  padding: .35rem;
}
.ui-datepicker .ui-datepicker-header {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ntl-lino);
  border-radius: 0;
  padding-bottom: .35rem;
}
.ui-datepicker .ui-datepicker-title {
  font-family: var(--ntl-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ntl-tinta);
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next { background: transparent; border: 0; cursor: pointer; }
.ui-datepicker th {
  font-family: var(--ntl-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--ntl-piedra-clara);
  text-transform: uppercase;
}
.ui-datepicker td a,
.ui-datepicker td span {
  font-family: var(--ntl-mono);
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--ntl-pildora);
  background: transparent;
  color: var(--ntl-piedra);
  padding: .3rem;
}
.ui-datepicker td a:hover { background: var(--ntl-bloque); color: var(--ntl-tinta); }
.ui-datepicker td a.ui-state-active,
.ui-datepicker .ui-state-highlight {
  background: var(--ntl-tinta) !important;
  color: var(--ntl-crema) !important;
  border-color: var(--ntl-tinta) !important;
}
.ui-widget-header { background: transparent; border: 0; color: var(--ntl-tinta); }
.ui-autocomplete {
  background: var(--ntl-blanco);
  border: 1px solid var(--ntl-lino-oscuro);
  border-radius: var(--ntl-radio-chico);
  box-shadow: none;
  font-family: var(--ntl-sans);
  font-size: 14px;
}
.ui-menu .ui-menu-item-wrapper.ui-state-active {
  background: var(--ntl-bloque);
  border-color: transparent;
  color: var(--ntl-tinta);
}

/* --------------------------------------------------------------------------
   Menús desplegables y listas
   -------------------------------------------------------------------------- */

.dropdown-menu {
  background-color: var(--ntl-blanco);
  border: 1px solid var(--ntl-lino);
  border-radius: var(--ntl-radio-chico);
  box-shadow: none;
  font-size: 14px;
  padding: .35rem 0;
}
.dropdown-item { color: var(--ntl-piedra); padding: .45rem 1.1rem; }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--ntl-bloque); color: var(--ntl-tinta); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--ntl-tinta); color: var(--ntl-crema); }
.dropdown-divider { border-top: 1px solid var(--ntl-lino); }

.list-group-item {
  background-color: var(--ntl-blanco);
  border-color: var(--ntl-lino);
  color: var(--ntl-piedra);
  font-size: 14px;
}
.list-group-item.active { background-color: var(--ntl-tinta); border-color: var(--ntl-tinta); color: var(--ntl-crema); }

/* --------------------------------------------------------------------------
   Pestañas
   -------------------------------------------------------------------------- */

.nav-tabs { border-bottom: 1px solid var(--ntl-lino); }
.nav-tabs .nav-link {
  color: var(--ntl-piedra);
  font-size: 14px;
  font-weight: 500;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  text-decoration: none;
}
.nav-tabs .nav-link:hover { color: var(--ntl-tinta); border-bottom-color: var(--ntl-lino-oscuro); }
.nav-tabs .nav-link.active {
  color: var(--ntl-tinta);
  background-color: transparent;
  border-bottom-color: var(--ntl-ambar);
}

.nav-pills .nav-link { border-radius: var(--ntl-pildora); font-size: 14px; color: var(--ntl-piedra); text-decoration: none; }
.nav-pills .nav-link.active { background-color: var(--ntl-tinta); color: var(--ntl-crema); }

/* --------------------------------------------------------------------------
   Progreso y paginación
   -------------------------------------------------------------------------- */

.progress { background-color: var(--ntl-lino); border-radius: var(--ntl-pildora); height: 6px; }
.progress-bar { background-color: var(--ntl-ambar); }

.page-link { color: var(--ntl-piedra); border-color: var(--ntl-lino); background-color: transparent; }
.page-item.active .page-link { background-color: var(--ntl-tinta); border-color: var(--ntl-tinta); color: var(--ntl-crema); }

/* --------------------------------------------------------------------------
   Utilidades de fondo heredadas
   Las vistas usan `bg-light`/`bg-dark`/`bg-info` como superficies; sobre la
   paleta nueva se traducen a crema, tinta y bloque.
   -------------------------------------------------------------------------- */

.bg-light   { background-color: var(--ntl-bloque) !important; }
.bg-dark    { background-color: var(--ntl-tinta) !important; color: var(--ntl-crema) !important; }
.bg-info,
.bg-primary { background-color: var(--ntl-bloque) !important; color: var(--ntl-tinta) !important; }
.bg-success { background-color: var(--ntl-verde-suave) !important; color: var(--ntl-verde) !important; }
.bg-danger  { background-color: var(--ntl-rojo-suave) !important; color: var(--ntl-rojo) !important; }
.bg-warning { background-color: var(--ntl-bloque) !important; color: var(--ntl-ambar) !important; }

.border, .border-top, .border-bottom, .border-left, .border-right { border-color: var(--ntl-lino) !important; }

/* --------------------------------------------------------------------------
   Bloques de marca reutilizables
   -------------------------------------------------------------------------- */

/* Tarjeta de trámite: la caja centrada de acceso, registro y recuperación. */
.ntl-panel {
  background-color: var(--ntl-blanco);
  border: 1px solid var(--ntl-lino);
  border-radius: var(--ntl-radio);
  padding: 2rem;
  width: 100%;
  max-width: 420px;
}
.ntl-panel__marca { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.ntl-panel__titulo {
  font-family: var(--ntl-serif);
  font-size: 1.5rem;
  color: var(--ntl-tinta);
  text-align: center;
  margin-bottom: .3rem;
}
.ntl-panel__pie {
  font-size: 13.5px;
  color: var(--ntl-piedra-clara);
  text-align: center;
  margin-top: 1.25rem;
}
.ntl-panel--ancho { max-width: 720px; }

/* Encabezado de sección con la barra ámbar del símbolo como eco. */
.ntl-titulo-seccion {
  font-family: var(--ntl-serif);
  font-size: 1.5rem;
  color: var(--ntl-tinta);
  padding-left: .85rem;
  border-left: 3px solid var(--ntl-ambar);
  line-height: 1.2;
}

/* El anuncio de la portada: se marca como anuncio y se separa del producto. */
.ntl-anuncio {
  border: 1px solid var(--ntl-lino);
  border-radius: var(--ntl-radio-chico);
  background-color: var(--ntl-blanco);
  padding: .5rem;
  display: inline-block;
  max-width: 100%;
}

/* Enlace social: glifo de trazo, no el logotipo azul de la red. */
.ntl-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ntl-piedra-clara);
  text-decoration: none !important;
  transition: color var(--ntl-transicion);
}
.ntl-social:hover { color: var(--ntl-ambar); }

/* El nombre de quien tiene la sesión abierta, en la barra: es un dato, no
   una etiqueta de navegación. */
.ntl-usuario {
  font-family: var(--ntl-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ntl-piedra-clara);
  white-space: nowrap;
}

/* Un dato dentro de un botón hereda el color del botón: `.ntl-dato` lo fija en
   tinta, que sobre el botón sólido sería invisible. */
.btn .ntl-dato { color: inherit; font-size: .95em; }

/* --------------------------------------------------------------------------
   La banda del otro servicio de Notular (views/marca/enlace_leyes.php).
   Espejo de la banda "También de Notular" de la portada de leyes.notular.mx.
   -------------------------------------------------------------------------- */

.ntl-hermano {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  /* Va arriba de la calculadora, donde antes estaba el banner. */
  margin: 0 0 28px;
  padding: 22px 30px;
  background-color: var(--ntl-bloque);
  border: 1px solid var(--ntl-lino);
  border-radius: var(--ntl-radio);
}
.ntl-hermano__texto  { flex: 1 1 320px; }
.ntl-hermano__titulo {
  font-family: var(--ntl-serif);
  font-size: 24px;
  line-height: 1.2;
  color: var(--ntl-tinta);
  margin: 8px 0 6px;
}
.ntl-hermano__nota {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ntl-piedra);
  max-width: 52ch;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Pantallas de aviso sueltas (pago realizado, error de pago, error de
   formulario). El estado ya no se dice con un fondo rojo o verde a toda la
   tarjeta, sino con un rótulo: el sistema reserva el color para el dato.
   -------------------------------------------------------------------------- */

.ntl-kicker--alerta { color: var(--ntl-rojo); }

.card-header {
  font-family: var(--ntl-serif);
  font-size: 1.25rem;
  color: var(--ntl-tinta);
}

/* --------------------------------------------------------------------------
   Mosaicos de los paneles de inicio (notario y administrador).

   Eran `btn-primary btn-lg btn-block` con un icono enorme dentro: seis botones
   sólidos uno junto a otro. Con la paleta nueva serían seis bloques de tinta
   compitiendo entre sí, y el sistema deja el peso visual al texto. Aquí son
   tarjetas de contorno; el ámbar sólo aparece al pasar el mouse.
   -------------------------------------------------------------------------- */

.ntl-mosaico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 116px;
  height: 104px;
  margin-bottom: .5rem;
  padding: 0;
  color: var(--ntl-piedra) !important;
  background-color: var(--ntl-blanco) !important;
  border: 1px solid var(--ntl-lino) !important;
  border-radius: var(--ntl-radio) !important;
  transition: color var(--ntl-transicion), border-color var(--ntl-transicion);
}
.ntl-mosaico:hover,
.ntl-mosaico:focus {
  color: var(--ntl-ambar) !important;
  border-color: var(--ntl-lino-oscuro) !important;
  background-color: var(--ntl-blanco) !important;
}
.ntl-mosaico .display-3 { font-size: 2.1rem; line-height: 1; }

/* La etiqueta que va debajo de cada mosaico. */
.ntl-mosaico + .d-block {
  display: block;
  width: 116px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ntl-piedra);
  text-align: center;
}

/* Bootstrap pinta `bg-secondary` gris oscuro; aquí sólo marca un bloque. */
.bg-secondary { background-color: var(--ntl-bloque) !important; color: var(--ntl-piedra) !important; }