/* =========================
   VARIABLES
========================= */
:root{
  --azul:#007BFF; --azul-hover:#0056b3;
  --gris:#6c757d; --gris-hover:#5a6268;
  --verde:#4CAF50; --verde-claro:#e6ffed;
  --rojo:#ff5c5c; --rojo-claro:#ffe4e1;
  --fondo:#f9f9f9; --blanco:#fff; --borde:#ccc;
  --sombra:2px 2px 8px rgba(0,0,0,0.1);
  --sombra-suave:0 0 8px rgba(0,0,0,0.05);
  --sombra-login:0 0 12px rgba(0,0,0,0.1);
}

/* =========================
   RESET / BASE
========================= */
*, *::before, *::after{ box-sizing:border-box; }
body{
  font-family:Arial, sans-serif;
  margin:10px 40px 0;
  background:var(--fondo);
  color:#333;
}
h1,h2,h3{ color:var(--azul-hover); }

/* =========================
   BOTONES
========================= */
.boton {
    display: inline-block;
    padding: .5em 1.2em;
    background: var(--azul);
    color: var(--blanco);
    border: none;
    border-radius: 6px;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, color .2s;
    font-family: inherit;
    text-align: center;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.boton:hover,
.boton:focus, {
  background:var(--azul-hover);
  outline:2px solid var(--azul-hover);
  outline-offset:2px;
}
.boton.cancelar{ background:var(--gris); }
.boton.cancelar:hover, .boton.cancelar:focus{
  background:var(--gris-hover); outline-color:var(--gris-hover);
}
.boton.eliminar{ background:#e74c3c; }
.boton.eliminar:hover, .boton.eliminar:focus{ background:#c0392b; }
.boton.advertencia{ background:#f39c12; color:#fff; }
.boton.salir{ background:#d9534f; color:#fff; }
.boton.salir:hover{ background:#c9302c; }
.boton-link:hover{ text-decoration:underline; }

.volver{
  display:inline-block; margin-top:20px;
  background:var(--gris); color:var(--blanco);
  padding:8px 12px; border-radius:5px; text-decoration:none; transition:background .2s;
}
.volver:hover, .volver:focus{ background:var(--gris-hover); outline:2px solid var(--gris-hover); outline-offset:2px; }

.acciones{ display:flex; gap:1em; margin-top:1.5em; justify-content:flex-start; }
.acciones-derecha{ text-align:center; margin-top:1em; }
.fuera-de-tarjeta{ margin-top:1em; display:flex; justify-content:center; gap:1em; }

/* =========================
   LAYOUT / TARJETAS / AGRUPACIONES
========================= */
.contenedor-dos-columnas{
  display:flex; gap:20px; margin:1em auto; max-width:1000px;
  justify-content:flex-start; align-items:flex-start;
}
.tarjeta{
  border:1px solid var(--borde); border-radius:10px;
  padding:20px; background:var(--blanco); box-shadow:var(--sombra);
  width:100%; max-width:1200px; margin:1em auto;
}
.tarjeta2{
  border:1px solid var(--borde); border-radius:10px;
  padding:20px; background:var(--blanco); box-shadow:var(--sombra);
  width:100%; max-width:500px; margin:1em auto;
}
.tarjeta3{
  min-height:400px;
  max-height:600px;
  overflow-y:auto;
  padding:0.5em;
  background:#fff;
  border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

/* Ajuste de compacidad interna */
.tarjeta3 * {
  line-height: 1;        /* más compacto (1.0 = muy apretado, 1.4 = estándar) */
}

.tarjeta3 p,
.tarjeta3 li,
.tarjeta3 div {
  margin-top: 0em;
  margin-bottom: 0em;    /* reduce espacio entre párrafos/listas */
}

.tarjeta3 ul,
.tarjeta3 ol {
  padding-left: 1em;     /* opcional: reduce indentación */
}

/* Columna izquierda/derecha */
.tarjeta.izquierda{
  flex:1 1 0; min-width:0; line-height:2;
  min-height:400px; max-height:540px; overflow-y:auto;
}
.tarjeta.derecha{
  flex:0 0 250px; width:250px; max-height:540px; overflow:auto;
}

/* Grupos de campos */
.grupo{
  display:flex; flex-wrap:wrap; gap:1em; align-items:flex-end;
  margin-bottom:.5em;
}
.grupo > div{ flex:1; min-width:170px; }

.grupo > div:first-child{ flex:0 0 auto; }
.grupo > div:last-child{ flex:1; }
.tarjeta .grupo{ margin-bottom:0; } /* más compacto dentro de tarjetas */

/* Grupo pacientes*/

.grupo-pacientes{
  display:flex; flex-wrap:wrap; gap:1em; align-items:flex-end;
  margin-bottom:.5em;
}
.grupo-pacientes > div{ flex:1; }

.grupo-pacientes > div:first-child{ flex:0 0 auto; }
.grupo-pacientes > div:nth-child(2) {
  flex: 0 0 auto; /* no crece, no encoge, ancho fijo px */
}
.grupo-pacientes > div:nth-child(3) {
  flex: 0 0 110px; /* no crece, no encoge, ancho fijo px */
}
.grupo-pacientes > div:nth-child(4) {
  flex: 0 0 100px; /* no crece, no encoge, ancho fijo px */
}
.grupo-pacientes > div:nth-child(5) {
  flex: 0 0 130px; /* no crece, no encoge, ancho fijo px */
}
.grupo-pacientes > div:nth-child(6) {
  flex: 0 0 130px; /* no crece, no encoge, ancho fijo px */
}
/* Grupo dsireccion*/

.grupo-direccion{
  display:flex; flex-wrap:wrap; gap:1em; align-items:flex-end;
  margin-bottom:.5em;
}
.grupo-direccion > div{ flex:1; }

.grupo-direccion > div:first-child{ flex:0 0 180px; }
.grupo-direccion > div:nth-child(2) {
  flex: 1 0 auto; /* no crece, no encoge, ancho fijo px */
}


/* Select fijo (p. ej. Intervención) */
.select-fijo{ width:200px; max-width:200px; }

/* Fila de intervención (modo flex por defecto; usa grid en plantillas con estilo inline si lo prefieres) */
.intervencion.grupo{ display:flex; align-items:center; gap:10px; }
.intervencion.grupo > div:nth-child(2){ flex:1; } /* pieza dental se expande */
.intervencion .eliminar{ align-self:center; }

/* =========================
   TABLAS
========================= */
table{ width:100%; border-collapse:collapse; margin-top:10px; background:var(--blanco); }
table th, table td{ border:1px solid var(--borde); padding:10px; text-align:left; }
table th{ background:#e9ecef; color:#333; }
/* Anchos mínimos útiles */
table td:nth-child(1), table th:nth-child(1){ min-width:200px; } /* Nombre */
table td:nth-child(3), table th:nth-child(3){ min-width:150px; } /* Localidad */

/* =========================
   FORMULARIOS
========================= */
form fieldset{ border:none; margin-bottom:1.5em; padding:0; }
form fieldset legend{ font-weight:bold; margin-bottom:.5em; display:block; text-align:left; }

form label{
  display:flex; align-items:center; gap:8px;
  margin-bottom:.5em; font-weight:normal; text-align:left;
}

form input[type="text"],
form input[type="date"],
form input[type="number"],
form input[type="datetime-local"],
form select,
form textarea,
input[type="password"],
input[type="email"]{
  width:100%; padding:8px; margin-bottom:16px; font-size:16px;
  border:1px solid var(--borde); border-radius:4px;
}

form input, form select, form textarea{ width:100%; min-width:0; box-sizing:border-box; }
form input, form select{ height:38px; }

input[type="number"].campo-corto{ width:60px; }
textarea{ min-height:100px; resize:vertical; font-size:14px; font-family:inherit; }
textarea.campo-corto{ height:50px !important; min-height:40px !important; }

.formulario{
  padding:1.5em; background:#f9f9f9; border-radius:10px;
  box-shadow:0 2px 4px rgba(0,0,0,0.1); margin-top:1em;
}

/* Campos medidos (panel derecho) */
.campo-fila{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.8em; }
.campo-fila label{ flex:1; text-align:left; margin-right:.5em; font-weight:bold; min-width:100px; }
.campo-medido{ display:flex; align-items:center; gap:4px; width:100px; }
.campo-medido input{ width:60px; text-align:right; padding:4px; font-size:14px; border:1px solid #ccc; border-radius:4px; }
.campo-medido .unidad{ width:100px; font-size:90%; white-space:nowrap; }
.campo-fila input{ width:50px; text-align:right; padding:6px; font-size:14px; border:1px solid #ccc; border-radius:4px; }
.campo-fila .unidad{ margin-left:.5px; font-weight:normal; font-size:90%; white-space:nowrap; }

/* Datos compactos (detalle) */
.fila-dato{ display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.fila-dato .etiqueta{ width:100px; text-align:right; font-weight:bold; flex-shrink:0; }
.fila-dato .valor{ width:45px; text-align:right; flex-shrink:0; }
.fila-dato .unidad{ width:50px; flex-shrink:0; color:#666; font-size:90%; }

/* Inputs number sin flechas */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
input[type=number]{ -moz-appearance:textfield; }

/* =========================
   TIPOGRAFÍA / TITULOS
========================= */
.centrado-pagina{ display:block; width:100%; max-width:1200px; margin:0 auto; padding:1em; }
.titulo-principal, .titulo-centro, h1.titulo-centro{ text-align:center; font-size:36px; margin-bottom:1em; }
.titulo-centro2{ color:black; width:600px; text-align:left; margin:1em auto; font-size:2em; }
.subtitulo{ text-align:center; font-size:20px; margin-bottom:40px; }
.titulo-con-boton {
    display: flex;
    align-items: center; /* Alinea verticalmente */
    justify-content: space-between; /* Separa el título y el botón */
    gap: 1rem; /* Espacio entre ellos */
}

.titulo-con-boton h1 {
    margin: 0; /* Elimina márgenes extra del título */
}

.titulo-con-boton .boton {
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
}

/* =========================
   MENÚ / ENCABEZADO
========================= */
.encabezado-principal{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:.5em; padding:0;
}
.grupo-izquierda{ display:flex; align-items:center; gap:5em; }

.menu-desplegable{ position:relative; display:inline-block; }
.menu-desplegable .boton{ background:var(--gris); color:#fff; padding:8px 12px; border:none; cursor:pointer; }
.menu-desplegable .contenido-menu{
  display:none;
  position:absolute;
  right:0;
  z-index:1;
  background:#fff;
  min-width:200px;
  box-shadow:0 8px 16px rgba(0,0,0,0.2);
}
.menu-desplegable .contenido-menu a{
  color:black; padding:10px 14px; text-decoration:none; display:block;
}
.menu-desplegable .contenido-menu a:hover{ background:#f1f1f1; }
.menu-desplegable:hover .contenido-menu{ display:block; }

/* Base: lo de siempre (no lo toques) */
/* ...tus reglas existentes... */

/* Solo para el menú de “Nueva consulta” */
.menu-desplegable--consulta { position: relative; } /* ancla el contenedor */
.menu-desplegable--consulta .contenido-menu{
  /* coloca el panel JUSTO debajo del botón y alineado a la izquierda */
  top: calc(100% + 6px);
  left: 0;
  right: auto;
}

/* Base existente: .menu-desplegable:hover .contenido-menu { display:block; } */

/* Mantén abierto si cualquier hijo tiene foco (accesible y estable) */
.menu-desplegable--consulta:focus-within .contenido-menu { display: block; }

/* Y quita el hueco visual usando padding-bottom en el contenedor */
.menu-desplegable--consulta { padding-bottom: 6px; }
.menu-desplegable--consulta .contenido-menu { top: 100%; left: 0; right: auto; z-index: 999; }


/* 2) Asegura que “Otros” se vea como el resto de items */
.menu-desplegable .contenido-menu > .menu-desplegable2 > a {
  display: block;
  padding: 10px 14px;
  color: black;
  text-decoration: none;
}

/* 3) Mover el panel del submenú (la caja que se abre) un poco a la derecha del trigger */
.menu-desplegable2 .contenido-menu2 {
  left: 10px;     /* usa left y quita cualquier right */
  right: auto;
}

/* 4) Mantén el hover consistente */
.menu-desplegable .contenido-menu > .menu-desplegable2 > a:hover,
.menu-desplegable .contenido-menu a:hover {
  background: #f1f1f1;
}

.menu-desplegable2{
    position:relative;
    display:inline-block;
    margin-left: 20px;
}

.menu-desplegable2 .boton{ background:var(--gris); color:#fff; padding:8px 12px; border:none; cursor:pointer; }

.menu-desplegable2 .contenido-menu2{
  display:none;
  position:absolute;
  left:100px;
  z-index:1;
  background:#fff;
  min-width:200px;
  box-shadow:0 8px 16px rgba(0,0,0,0.2);
}
.menu-desplegable2 .contenido-menu2 a{
  color:black; padding:10px 14px; text-decoration:none; display:block;
}
.menu-desplegable2 .contenido-menu2 a:hover{ background:#f1f1f1; }
.menu-desplegable2:hover .contenido-menu2{ display:block; }

/* 2) Asegura que “Otros” se vea como el resto de items */
.menu-desplegable .contenido-menu > .menu-desplegable2 > a {
  display: block;
  padding: 10px 0px;
  color: black;
  text-decoration: none;
}

/* 3) Mover el panel del submenú (la caja que se abre) un poco a la derecha del trigger */
.menu-desplegable2 .contenido-menu2 {
  left: 10px;     /* usa left y quita cualquier right */
  right: auto;
}

/* 4) Mantén el hover consistente */
.menu-desplegable .contenido-menu > .menu-desplegable2 > a:hover,
.menu-desplegable .contenido-menu a:hover {
  background: #f1f1f1;
}


.menu-principal{ list-style:none; padding:0; max-width:600px; margin:auto; text-align:center; }
.menu-principal li{ margin:12px 0; }
.menu-principal a{ font-size:36px; text-decoration:none; color:var(--azul); transition:color .2s, text-decoration .2s; }
.menu-principal a:hover, .menu-principal a:focus{ color:var(--azul-hover); text-decoration:underline; }
.menu-principal .enlace-salir{
  all:unset; cursor:pointer; display:block; padding:10px 15px; color:#333; text-decoration:none; transition:background .3s;
}
.menu-principal .enlace-salir:hover{ background:#eee; }
.boton-menu-enlace{
  all:unset; display:block; width:100%; padding:10px 15px; color:#333; text-decoration:none; cursor:pointer; font-size:1em; transition:background-color .3s;
}
.boton-menu-enlace:hover{ background:#e0e0e0; }

/* =========================
   LOGIN
========================= */
.pagina-login{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  min-height:100vh; background:#f5f5f5;
}
.pagina-login .barra-superior{ flex-direction:column; margin:2em 0; }
.pagina-login .tarjeta{
  background:var(--blanco); padding:2em; border-radius:12px;
  box-shadow:var(--sombra-login); max-width:400px;
}

/* =========================
   FILTROS / BUSQUEDA
========================= */
.filtro-formulario, .formulario-busqueda{
  margin-bottom:2em; background:var(--blanco); padding:1em; border-radius:10px; box-shadow:var(--sombra-suave);
}
.filtro-formulario{ max-width:900px; margin:auto; }
.filtro-formulario label, .formulario-busqueda label{ font-weight:bold; margin-bottom:0; }
.filtro-formulario input, .filtro-formulario select{ max-width:250px; }
.filtro-campo{ width:250px; }
.campo-filtro{
  height:36px; padding:.4em; font-size:1em; width:220px; line-height:1.2;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
}
.boton-filtro{
  height:36px; padding:0 1em; font-size:1em; border:none; border-radius:6px; color:#fff;
  background:#3498db; cursor:pointer; display:flex; align-items:center; justify-content:center; text-decoration:none; transition:background .2s;
}
.boton-filtro:hover, .boton-filtro:focus{ background:#2980b9; outline:2px solid #2980b9; outline-offset:2px; }
.boton-filtro.limpiar{ background:#aaa; }

.filtro-formulario .grupo{ display:flex; gap:20px; align-items:flex-end; flex-wrap:wrap; }
.filtro-formulario .grupo > div{ display:flex; flex-direction:column; }
.filtro-formulario .grupo > div:last-child{ align-self:flex-end; margin-bottom:0; }
.filtro-formulario .grupo > div:last-child label{ visibility:hidden; height:1em; }

.grupo-filtros{ display:flex; flex-wrap:wrap; gap:1em; align-items:flex-end; }
.filtro-item{ display:flex; flex-direction:column; }
.filtro-item.botones{ flex-direction:row; align-items:flex-end; gap:.5em; margin-top:1.6em; }
.filtro-botones{ display:flex; flex-direction:row; align-items:flex-end; gap:.5em; }

/* Compacto */
.filtro-formulario-compacto{
  padding:.5em 1em; margin:.5em 0 1em; box-shadow:none;
}
.filtro-formulario-compacto .grupo-filtros{ gap:12px; margin-bottom:.6em; }
.filtro-formulario-compacto label{ margin-bottom:2px; font-size:1em; }
.filtro-formulario-compacto .campo-filtro{ margin-bottom:0; height:32px; font-size:1em; }
.filtro-botones-row{ display:flex; gap:.7em; justify-content:flex-start; margin:.0 .0 .3em; }
.filtro-botones-row .boton-filtro{ height:32px; font-size:1em; padding:0 1em; }

/* =========================
   MENSAJES / UTILIDADES
========================= */
.flash-exito{
  background:var(--verde-claro); border:1px solid var(--verde); color:#256029;
  padding:.8em; margin:1em auto; border-radius:5px; text-align:center;
}
.flash-error{
  background:var(--rojo-claro); border:1px solid var(--rojo); color:#b30000;
  padding:.8em; margin:1em auto; border-radius:5px; text-align:center;
}
.mensaje{ padding:1em; border-radius:5px; margin:1em 0; font-weight:bold; }
.mensaje.error{ background:#ffd6d6; color:#a00; }
.mensaje.exito{ background:#d6ffd6; color:#070; }

.texto-corto{ font-size:16px; line-height:1; margin:6px 0 !important; }
.texto-corto strong{ font-size:1.1em; }
.tarjeta-amplia .grupo div{ margin-bottom:30px; }
.tarjeta-amplia p{ margin:4px 0; }
.tarjeta-amplia ul{ margin:4px 0 4px 1em; padding-left:1em; }
.tarjeta-amplia li{ margin-bottom:2px; line-height:1.3; }
.tarjeta-amplia h3{ margin:1em 0 .5em; }

/* Icono papelera */
.icono-eliminar{
  background:none; border:none; padding:0; margin:0;
  font-size:1.2rem; cursor:pointer; line-height:1;
}
.icono-eliminar:hover{ transform:scale(1.2); }

/* Logos */
.logo{ width:300px; height:auto; margin-bottom:3em; }
.logo2{ width:400px; height:auto; margin:0; }

/* =========================
   RESPONSIVE
========================= */
@media (max-width:768px){
  .contenedor-dos-columnas{ flex-direction:column; }
}
@media (max-width:600px){
  body{ margin:0 5px; }
  .tarjeta, .tarjeta2, .filtro-formulario{ max-width:99vw; padding:8px; }
  .menu-principal a{ font-size:22px; }
  table th, table td{ padding:6px; font-size:13px; }
  .logo, .logo2{ width:90vw; max-width:300px; }
}

/* =========================
   CAMPOS CON ICONO (password)
========================= */
.campo-con-icono{ position:relative; }
.campo-con-icono input[type="password"],
.campo-con-icono input[type="text"]{ width:100%; padding-right:2.5em; }
.toggle-password{
  position:absolute; right:.5em; top:50%; transform:translateY(-50%);
  background:none; border:none; padding:0; cursor:pointer;
}
.toggle-password svg{ stroke:#444; }

/* Accesible: ocultar texto visual, mantener para lectores de pantalla */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Rejilla común: 3 columnas + papelera */
.intervenciones-header,
#intervenciones-container {
  display: grid;
  grid-template-columns: 250px 150px 250px 32px;
  column-gap: .5rem;
  align-items: center;
}

#intervenciones-container .campo-pieza select {
  width: 50px !important;
  min-width: 150px;
  max-width: 150px;
  box-sizing: border-box;
}

/* Cabecera (una sola línea) */
.intervenciones-header {
  font-weight: 600;
  font-size: .92rem;
  line-height: 1.2;
  padding-bottom: .25rem;
  border-bottom: 1px solid #ddd;
  margin-bottom: .25rem;
}

/* Filas muy compactas */
#intervenciones-container {
  row-gap: .2rem; /* mínima separación vertical */
  font-size: .92rem;
  line-height: 1.2;
}

/* Cada fila se “descompone” en celdas de la rejilla */
#intervenciones-container .intervencion {
  display: contents; /* coloca sus hijos en las 4 columnas */
}

/* Celda genérica */
#intervenciones-container .campo { min-width: 0; }

/* Inputs compactos */
#intervenciones-container select,
#intervenciones-container input {
  width: 100%;
  box-sizing: border-box;
  padding: .25rem .4rem;
  min-height: 1.9rem;
  font-size: .92rem;
  line-height: 1.2;
}

/* Botón papelera compacto */
#intervenciones-container .icono-eliminar {
  border: none;
  background: transparent;
  padding: .2rem;
  cursor: pointer;
  line-height: 0;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Por si había márgenes heredados */
#intervenciones-container .intervencion > * { margin: 0 !important; }

/* (Opcional) todavía más denso dentro de .tarjeta3 */
.tarjeta3 #intervenciones-container { row-gap: .15rem; }

.grupo_estadistica {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.grupo_estadistica label {
  display: flex;
  align-items: center;
  gap: 0.7em; /* separación entre checkbox y texto */
  white-space: nowrap; /* evita salto de línea */
  font-size: 1em;
}

.grupo_estadistica input[type="checkbox"] {
  transform: scale(1); /* reduce tamaño */
  margin: 0;
}

fieldset {
  border: 1px solid #ccc;
  padding: 0.5em 1em;
  margin-bottom: 1em;
}

fieldset legend {
  font-weight: bold;
  margin-bottom: 0.3em;
}

/* Layout dos columnas */
.layout-estadisticas{
  display:flex;
  gap: 1rem;
  align-items: flex-start;
}
.layout-estadisticas .col{
  display:block;
}
.layout-estadisticas .col-izq{
  flex: 0 0 600px;       /* ancho fijo cómodo para el panel de filtros */
}
.layout-estadisticas .col-der{
  flex: 1 1 auto;        /* el panel de resultados ocupa el resto */
  min-width: 320px;
}

/* Contenedor general de filtros (no interfiere con .grupo) */
.filtros-estadistica{
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin: .5rem 0;
}

/* Cada fila: dos columnas fluidas, compactas */
.fila-filtros{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Campo con etiqueta arriba y control 100% de ancho */
.fila-filtros .campo{
  flex: 1 1 220px;   /* mínimo cómodo; crece si hay espacio */
  min-width: 180px;
}
.fila-filtros .campo label{
  display: block;
  font-size: .85em;
  color: #444;
  margin-bottom: .2em;
}
.fila-filtros .campo input[type="date"],
.fila-filtros .campo select{
  width: 100%;
  padding: .4em .5em;
  border: 1px solid var(--borde, #ccc);
  border-radius: 8px;
  line-height: 1.2;
  background: #fff;
}

/* Responsive: si la pantalla es estrecha, se apilan limpias */
@media (max-width: 720px){
  .fila-filtros .campo{ flex: 1 1 100%; }
}

.lista-categorias { margin: .2rem 0 0; padding-left: 0; list-style: none; }
.lista-categorias > li { margin-bottom: .4rem; }

.lista-categorias .categoria {
  font-weight: 600;
  margin: .2rem 0;
}

.lista-tipos { list-style: none; margin: .2rem 0 0; padding-left: 0.75rem; }

.fila-tipo {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .15rem 0;
  border-bottom: 1px dashed rgba(0,0,0,.06);
}
.fila-tipo:last-child { border-bottom: 0; }
.fila-tipo .tipo { flex: 1 1 250px; }
.fila-tipo .cantidad { flex: 0 1 auto; font-variant-numeric: tabular-nums; }