/* CarrizoMed · colores del logo: azul marino #0B1C34 y dorado #BC8D42 */
:root {
  --marino: #0B1C34;
  --dorado: #BC8D42;
  --fondo: #F5F6F9;
  --panel: #FFFFFF;
  --texto: #1A2233;
  --suave: #5F6880;
  --linea: #DFE3EC;
  --acento: #0B1C34;
  --acento-texto: #FFFFFF;
  --enlace: #1F4FA8;
  --ok: #1A7A52;
  --ok-fondo: #E1F3EA;
  --alerta: #8A5A0B;
  --alerta-fondo: #FBF1DD;
  --error: #A33A2A;
  --error-fondo: #FBE8E4;
  --sombra: 0 1px 2px rgb(11 28 52 / .06), 0 4px 16px rgb(11 28 52 / .06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #0B1220;
    --panel: #141C2D;
    --texto: #E7EBF3;
    --suave: #98A2B8;
    --linea: #29334A;
    --acento: #D4A65A;
    --acento-texto: #0B1C34;
    --enlace: #8DB4F5;
    --ok: #64CFA2;
    --ok-fondo: #11301F;
    --alerta: #E8B65E;
    --alerta-fondo: #33270F;
    --error: #F08B78;
    --error-fondo: #3A1C17;
    --sombra: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #0B1220;
  --panel: #141C2D;
  --texto: #E7EBF3;
  --suave: #98A2B8;
  --linea: #29334A;
  --acento: #D4A65A;
  --acento-texto: #0B1C34;
  --enlace: #8DB4F5;
  --ok: #64CFA2;
  --ok-fondo: #11301F;
  --alerta: #E8B65E;
  --alerta-fondo: #33270F;
  --error: #F08B78;
  --error-fondo: #3A1C17;
  --sombra: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
a, .enlace { color: var(--enlace); text-decoration: none; }
a:hover, .enlace:hover { text-decoration: underline; }
h1 { font-size: 1.45rem; margin: 0; color: var(--acento); letter-spacing: -.01em; }
h2 { font-size: 1.02rem; margin: 1.6rem 0 .6rem; display: flex; align-items: center; gap: .5rem; }
small, .suave { color: var(--suave); }
.suave { font-size: .9rem; }
[hidden] { display: none !important; }

button, .boton { font: inherit; padding: .42rem .85rem; border-radius: .45rem; border: 1px solid var(--linea);
  background: var(--panel); color: var(--texto); cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--dorado); }
button:disabled { opacity: .5; cursor: default; }
button.principal { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); font-weight: 600; }
button.peligro { color: var(--error); }
button.enlace { background: none; border: 0; padding: 0; }
input, select, textarea { font: inherit; padding: .45rem .6rem; border: 1px solid var(--linea); border-radius: .4rem;
  background: var(--panel); color: var(--texto); width: 100%; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--dorado); outline-offset: 1px; }
input[type=color] { padding: .1rem; height: 2.4rem; }
input[type=checkbox], input[type=radio] { width: auto; }
label { display: grid; gap: .2rem; font-size: .86rem; color: var(--suave); }
label.check { display: flex; align-items: center; gap: .45rem; color: var(--texto); font-size: .92rem; }
fieldset { border: 1px solid var(--linea); border-radius: .5rem; padding: .7rem .9rem; display: grid; gap: .6rem; margin: 0; }
legend { padding: 0 .3rem; font-size: .85rem; color: var(--suave); }

/* --- Acceso ------------------------------------------------------------------ */
#acceso { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; }
.tarjeta-acceso { width: min(26rem, 100%); background: var(--panel); border: 1px solid var(--linea); border-radius: .9rem;
  padding: 1.8rem 1.6rem; display: grid; gap: .9rem; box-shadow: var(--sombra); }
.logo-acceso { width: 11rem; margin: 0 auto .4rem; display: block; border-radius: .6rem; }
.tarjeta-acceso h1 { text-align: center; font-size: 1.25rem; }
.qr { width: 12rem; height: 12rem; margin: 0 auto; background: #fff; padding: .4rem; border-radius: .4rem; }
.pasos { margin: 0; padding-left: 1.2rem; font-size: .92rem; }
.opcion-clinica { text-align: left; padding: .8rem 1rem; }
code { font-size: .9rem; word-break: break-all; }

/* --- Estructura --------------------------------------------------------------- */
.barra { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .55rem 1.5rem;
  background: var(--panel); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 10; }
.marca { display: flex; align-items: center; gap: .55rem; color: var(--marino); font-weight: 700; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marca { color: var(--texto); } }
:root[data-theme="dark"] .marca { color: var(--texto); }
.marca:hover { text-decoration: none; }
.marca img { height: 2.1rem; width: 2.1rem; }
.marca b { font-weight: 500; color: var(--dorado); }
#menu { display: flex; gap: .2rem; flex-wrap: wrap; }
#menu a { padding: .4rem .8rem; border-radius: .4rem; color: var(--texto); }
#menu a:hover { background: var(--fondo); text-decoration: none; }
#menu a.activa { background: var(--acento); color: var(--acento-texto); font-weight: 600; }
.usuario { margin-left: auto; display: flex; align-items: center; gap: .6rem; font-size: .88rem; color: var(--suave); }
main { max-width: 84rem; margin: 0 auto; padding: 1.4rem 1.5rem 3rem; }
.cargando { color: var(--suave); }

.herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-bottom: 1rem; }
.espacio { flex: 1; }
.pestanas { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: .8rem; }
.pestanas button { border-radius: 2rem; }
.pestanas button.activa { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); }
.pestanas button[style].activa { background: var(--c); border-color: var(--c); color: #fff; }
.pestanas button[style].activa .punto { background: #fff !important; }
.pestanas .derecha { margin-left: auto; }
.pestanas-ficha { display: flex; flex-wrap: wrap; gap: .2rem; border-bottom: 1px solid var(--linea); margin: 1rem 0 1.2rem; }
.pestanas-ficha a { padding: .55rem 1rem; color: var(--suave); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 600; }
.pestanas-ficha a:hover { color: var(--texto); text-decoration: none; }
.pestanas-ficha a.activa { color: var(--acento); border-bottom-color: var(--dorado); }
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 0 1.5rem; }

/* --- Piezas ------------------------------------------------------------------ */
.portada { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 1.4rem; }
.portada img { width: 9rem; border-radius: .7rem; }
.portada p { margin: .1rem 0; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .7rem; margin-bottom: .5rem; }
.cifra { background: var(--panel); border: 1px solid var(--linea); border-radius: .6rem; padding: .8rem 1rem; color: var(--texto); }
a.cifra:hover { text-decoration: none; border-color: var(--dorado); }
.cifra b { display: block; font-size: 1.55rem; line-height: 1.15; color: var(--acento); font-variant-numeric: tabular-nums; }
.cifra span { color: var(--suave); font-size: .85rem; }
.cifra.atencion { border-color: var(--alerta); background: var(--alerta-fondo); }
.cifra.atencion b { color: var(--alerta); }
.cifra.destacada { border-color: var(--dorado); }

.lista { background: var(--panel); border: 1px solid var(--linea); border-radius: .6rem; overflow: hidden; }
.fila { display: grid; grid-template-columns: 9.5rem 1fr auto; gap: .8rem; align-items: center; padding: .6rem 1rem;
  border: 0; border-bottom: 1px solid var(--linea); width: 100%; text-align: left; background: none; border-radius: 0; }
.fila:last-child { border-bottom: 0; }
button.fila:hover { background: var(--fondo); border-color: var(--linea); }
.fila .hora { font-variant-numeric: tabular-nums; font-weight: 600; display: grid; }
.fila.mia { box-shadow: inset 3px 0 0 var(--dorado); }
.fila.futura { opacity: .85; }
.fila .derecha { display: grid; justify-items: end; gap: .15rem; }
.vacio { padding: .9rem 1rem; color: var(--suave); margin: 0; }

.chip { display: inline-flex; align-items: center; gap: .1rem; font-size: .88rem; }
.punto { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; margin-right: .35rem; flex: none; }
.etiqueta { display: inline-block; font-size: .72rem; font-weight: 600; padding: .05rem .45rem; border-radius: .25rem;
  background: var(--fondo); color: var(--suave); border: 1px solid var(--linea); margin-left: .25rem; white-space: nowrap; }
.etiqueta.aviso { background: var(--alerta-fondo); color: var(--alerta); border-color: transparent; }
.cuenta { font-size: .75rem; padding: 0 .45rem; border-radius: 1rem; background: var(--fondo); border: 1px solid var(--linea); color: var(--suave); }

.estado { display: inline-block; font-size: .74rem; font-weight: 600; padding: .1rem .5rem; border-radius: 1rem; white-space: nowrap;
  background: var(--fondo); color: var(--suave); border: 1px solid var(--linea); }
.e-confirmada, .e-asistida { background: var(--ok-fondo); color: var(--ok); border-color: transparent; }
.e-sin_confirmar, .e-pide_cambio { background: var(--alerta-fondo); color: var(--alerta); border-color: transparent; }
.e-no_presentada, .e-cancelada_sin_preaviso { background: var(--error-fondo); color: var(--error); border-color: transparent; }
.e-cancelada_preaviso { text-decoration: line-through; }

.ok { color: var(--ok); background: var(--ok-fondo); padding: .55rem .8rem; border-radius: .4rem; margin: 0; }
.alerta { color: var(--alerta); background: var(--alerta-fondo); padding: .55rem .8rem; border-radius: .4rem; }
.error { color: var(--error); font-size: .9rem; margin: 0; min-height: 1.2em; }
.pendiente { color: var(--error); font-weight: 600; }

table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--linea); border-radius: .6rem; overflow: hidden; }
th, td { text-align: left; padding: .5rem .8rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { font-size: .8rem; color: var(--suave); font-weight: 600; background: var(--fondo); }
tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.fila-enlace { cursor: pointer; }
tr.fila-enlace:hover td { background: var(--fondo); }
tr.anulado td { color: var(--suave); text-decoration: line-through; }
tr.anulado td small, tr.anulado td button { text-decoration: none; }
.tabla-ancha { overflow-x: auto; }
.buscar { max-width: 32rem; margin-bottom: 1rem; }
.rango { display: flex; align-items: center; gap: .3rem; margin-left: auto; }
.rango input { width: 7.5rem; }

.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .9rem 1.5rem; margin: 0;
  background: var(--panel); border: 1px solid var(--linea); border-radius: .6rem; padding: 1.1rem 1.3rem; }
.ficha dt { font-size: .78rem; color: var(--suave); }
.ficha dd { margin: 0; }
.ficha .ancho { grid-column: 1 / -1; }
.texto-largo { white-space: pre-wrap; }
.grupo-notas h3 { font-size: .92rem; margin: 1rem 0 .45rem; display: flex; align-items: center; gap: .4rem; }
.historial .nota { padding: .8rem 1rem; border-bottom: 1px solid var(--linea); }
.historial .nota:last-child { border-bottom: 0; }
.historial .nota header { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.historial .nota p { margin: .45rem 0; }

/* --- Agenda --------------------------------------------------------------------- */
.leyenda { margin: 0 0 .7rem; }
.agenda { display: grid; grid-template-columns: 3.2rem repeat(var(--dias), minmax(9rem, 1fr)); overflow-x: auto;
  background: var(--panel); border: 1px solid var(--linea); border-radius: .6rem; }
.horas { position: relative; margin-top: 2.6rem; }
.horas span { position: absolute; right: .4rem; transform: translateY(-50%); font-size: .72rem; color: var(--suave); font-variant-numeric: tabular-nums; }
.dia-agenda { border-left: 1px solid var(--linea); min-width: 9rem; }
.dia-agenda > header { height: 2.6rem; display: grid; place-items: center; font-weight: 600; text-transform: capitalize;
  border-bottom: 1px solid var(--linea); font-size: .9rem; }
.dia-agenda > header small { font-weight: 400; }
.dia-agenda.hoy > header { color: var(--dorado); box-shadow: inset 0 -2px 0 var(--dorado); }
.cuerpo-dia { position: relative; cursor: copy;
  background-image: repeating-linear-gradient(to bottom, var(--linea) 0 1px, transparent 1px 66px);
  background-color: color-mix(in srgb, var(--fondo) 70%, var(--panel)); }
.franja { position: absolute; left: 0; right: 0; background: var(--panel); }
.bloque { position: absolute; padding: .15rem .35rem; border-radius: .3rem; overflow: hidden; text-align: left; font-size: .76rem;
  line-height: 1.25; cursor: pointer; color: var(--texto); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  border-left: 4px solid var(--c); background: color-mix(in srgb, var(--c) 16%, var(--panel)); box-sizing: border-box; }
.bloque:hover { background: color-mix(in srgb, var(--c) 26%, var(--panel)); z-index: 2; border-color: var(--c); }
.bloque small { display: block; color: var(--suave); }
.bloque .signo { font-weight: 700; }
.bloque.e-cancelada_preaviso, .bloque.e-cancelada_sin_preaviso { opacity: .5; text-decoration: line-through; }
.bloque.e-sin_confirmar, .bloque.e-pide_cambio { outline: 2px dashed var(--alerta); outline-offset: -2px; }
.marca-primera { font-size: .66rem; font-weight: 700; color: var(--alerta); }

/* --- Ventanas ------------------------------------------------------------------- */
dialog { border: 1px solid var(--linea); border-radius: .8rem; padding: 0; width: min(36rem, calc(100vw - 2rem));
  background: var(--panel); color: var(--texto); box-shadow: var(--sombra); max-height: calc(100vh - 2rem); }
dialog.ancho { width: min(46rem, calc(100vw - 2rem)); }
dialog::backdrop { background: rgb(11 18 32 / .5); }
dialog form { padding: 1.2rem 1.4rem; display: grid; gap: .75rem; }
dialog h2 { margin: 0; font-size: 1.15rem; }
.doble { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.triple { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: .75rem; }
.opciones { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; align-items: center; }
.opciones label { display: flex; align-items: center; gap: .35rem; color: var(--texto); font-size: .92rem; }
.separador { width: 1px; height: 1.2rem; background: var(--linea); }
.acciones { display: flex; justify-content: flex-end; gap: .5rem; }
.botonera { display: flex; flex-wrap: wrap; gap: .4rem; }
.cabecera-cita { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.resumen-saldo { display: flex; flex-wrap: wrap; gap: 1.2rem; background: var(--fondo); padding: .55rem .8rem; border-radius: .4rem; font-size: .9rem; }
.lista-simple { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .9rem; }
.buscador-paciente { position: relative; }
.resultados { display: grid; border-radius: .4rem; overflow: hidden; }
.resultados:not(:empty) { border: 1px solid var(--linea); margin-top: .2rem; }
.resultados button { border: 0; border-radius: 0; text-align: left; border-bottom: 1px solid var(--linea); }
.resultados button small { margin-left: .4rem; }
.nuevo-paciente { display: grid; gap: .6rem; }
.nuevo-paciente summary { cursor: pointer; color: var(--enlace); font-size: .9rem; }
.formulario-ajustes { display: grid; gap: .7rem; max-width: 34rem; }

#aviso { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); background: var(--marino); color: #fff;
  padding: .6rem 1.1rem; border-radius: .5rem; box-shadow: var(--sombra); z-index: 50; }

@media (max-width: 700px) {
  main { padding: 1rem; }
  .barra { padding: .5rem 1rem; }
  .usuario #nombre-usuario { display: none; }
  .fila { grid-template-columns: 1fr; gap: .25rem; }
  .fila .derecha { justify-items: start; }
  .fila > .estado { justify-self: start; }
  .doble, .triple { grid-template-columns: 1fr; }
  .portada img { width: 5.5rem; }
  .rango { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* --- Inicio: agenda del día ------------------------------------------------------ */
.fecha-titulo { font-weight: 400; color: var(--suave); }
.agenda-dia { position: relative; }
.agenda { padding-bottom: .7rem; }
.dia-agenda > header.cabecera-profesional { gap: .1rem; text-transform: none; }
.agenda.una-columna { max-width: 44rem; }
.ahora { position: absolute; left: 3.2rem; right: 0; border-top: 2px solid var(--error); pointer-events: none; z-index: 3; }
.ahora span { position: absolute; left: -3.1rem; top: -.65rem; font-size: .7rem; font-weight: 700; color: var(--error);
  background: var(--panel); padding: 0 .2rem; font-variant-numeric: tabular-nums; }
.avisos { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.aviso-chip { border-radius: 2rem; font-weight: 600; font-size: .88rem; }
.aviso-chip.a-sin_confirmar, .aviso-chip.a-pide_cambio { background: var(--alerta-fondo); color: var(--alerta); border-color: transparent; }
.aviso-chip.a-fallido { background: var(--error-fondo); color: var(--error); border-color: transparent; }

.selector-vista { display: inline-flex; border: 1px solid var(--linea); border-radius: .5rem; overflow: hidden; margin-left: .5rem; }
.selector-vista a { padding: .35rem .9rem; color: var(--texto); font-weight: 600; font-size: .9rem; }
.selector-vista a:hover { text-decoration: none; background: var(--fondo); }
.selector-vista a.activa { background: var(--acento); color: var(--acento-texto); }

/* --- Reserva online, valoraciones y pagos online ------------------------------------ */
.e-pendiente_pago { background: var(--alerta-fondo); color: var(--alerta); border-color: transparent; }
.e-reserva_caducada { text-decoration: line-through; }
.e-pago-pagado { background: var(--ok-fondo); color: var(--ok); border-color: transparent; }
.e-pago-denegado, .e-pago-caducado { background: var(--error-fondo); color: var(--error); border-color: transparent; }
.e-pago-devuelto { text-decoration: line-through; }
.e-proceso-abierta { background: var(--alerta-fondo); color: var(--alerta); border-color: transparent; }
.e-proceso-terminada { background: var(--ok-fondo); color: var(--ok); border-color: transparent; }
.e-proceso-anulada { text-decoration: line-through; }
.etiqueta.web { background: color-mix(in srgb, var(--dorado) 18%, var(--panel)); color: var(--texto); border-color: color-mix(in srgb, var(--dorado) 45%, transparent); }
/* Hueco guardado mientras el paciente paga: rayado y apagado. */
.bloque.e-pendiente_pago { opacity: .72; border-style: dashed;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 16%, var(--panel)) 0 6px, var(--panel) 6px 12px); }
.bloque .pendiente-pago { color: var(--alerta); font-weight: 700; }
.marca-web { font-size: .62rem; font-weight: 700; color: var(--dorado); text-transform: uppercase; letter-spacing: .03em; }
.aviso-chip.a-devolucion { background: var(--error-fondo); color: var(--error); border-color: transparent; }
.aviso-chip.a-ficha_web { background: color-mix(in srgb, var(--dorado) 18%, var(--panel)); color: var(--texto); border-color: transparent; }
.sugerencias { align-items: center; margin-top: .35rem; }
.aviso-ficha { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.aviso-ficha span { flex: 1; min-width: 12rem; }
.foto-profesional { width: 2.6rem; height: 2.6rem; border-radius: 50%; object-fit: cover; background: var(--fondo); border: 1px solid var(--linea); vertical-align: middle; }
.foto-grande { width: 6rem; height: 6rem; }
.sin-foto { display: inline-grid; place-items: center; font-size: .7rem; color: var(--suave); }
.fragmento { display: grid; gap: .45rem; background: var(--panel); border: 1px solid var(--linea); border-radius: .6rem; padding: .8rem 1rem; max-width: 46rem; }
.fragmento pre { margin: 0; padding: .6rem .7rem; background: var(--fondo); border-radius: .4rem; white-space: pre-wrap; word-break: break-all; font-size: .82rem; }
.fragmento button { justify-self: start; }
.quien-lo-hace { display: grid; gap: .35rem; }
.quien-lo-hace .fila-quien { display: grid; grid-template-columns: 1fr 8rem; gap: .6rem; align-items: center; }
.formulario-ajustes fieldset { margin-top: .3rem; }
td .check { font-size: .86rem; }
@media (max-width: 700px) {
  .quien-lo-hace .fila-quien { grid-template-columns: 1fr 6.5rem; }
}

/* Bloqueos de agenda: gris rayado, por debajo de las citas */
.bloqueo-agenda { position: absolute; left: 0; right: 0; z-index: 1; text-align: left; overflow: hidden;
  display: flex; flex-wrap: wrap; align-content: flex-start; align-items: baseline; gap: 0 .3em;
  padding: 2px 6px; font-size: .78rem; line-height: 1.25; color: var(--texto); cursor: pointer;
  border: 1px dashed var(--suave); border-radius: 6px;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--suave) 18%, transparent) 0 6px, color-mix(in srgb, var(--suave) 8%, transparent) 6px 12px); }
.bloqueo-agenda b { font-weight: 700; }
.bloqueo-agenda small { flex-basis: 100%; color: var(--suave); }
.cuerpo-dia .bloque { z-index: 2; }
.botonera { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Test de drogas: una fila por sustancia con sus tres resultados */
.panel-test { gap: 0; }
.fila-sustancia { display: grid; grid-template-columns: minmax(8rem, 1fr) auto; gap: .3rem 1rem; align-items: center;
  padding: .4rem 0; border-bottom: 1px solid var(--linea); }
.fila-sustancia > span { font-weight: 600; }
.fila-sustancia .opciones { gap: .3rem .9rem; }
.fila-sustancia label:has(input:checked) { font-weight: 600; }
.fila-sustancia .r-positivo:has(input:checked) { color: var(--error); }
.panel-test > div:last-child { padding-top: .5rem; }
.acciones-test { text-align: right; }
.editor-panel { display: grid; gap: .4rem; }
.editor-panel .fila-panel { display: grid; grid-template-columns: 1fr auto auto auto; gap: .35rem; align-items: center; }
.editor-panel .fila-panel button { padding: .35rem .6rem; }
@media (max-width: 700px) {
  .fila-sustancia { grid-template-columns: 1fr; }
  .acciones-test { text-align: left; }
}