/* Panel de Super Admin (soporte.html) con el acabado del estilo V3 de la app: tarjetas sin borde
   con esquinas grandes y sombra suave, botones y filtros en píldora, cifras en tarjetas. Solo lo
   carga el panel; la app de las empresas no cambia. */

:root {
  --sa-radio: 22px;
  --sa-sombra: 0 1px 2px rgb(0 29 61 / 4%), 0 8px 24px rgb(0 29 61 / 5%);
  --sa-borde: #e6e9ee;
  --sa-suave: #f1f3f6;
  --sa-linea: #eef0f3;
  --sa-menu: 248px;
}
::selection { background: color-mix(in srgb, var(--color-mar, #0466c8) 22%, transparent); }

/* ---------- Acabado V3 de las piezas comunes ---------- */
.sa .boton, .modal .boton { border-radius: 999px; border-color: var(--sa-borde); min-height: 40px; padding: 8px 18px; justify-content: center; }
.sa .boton:hover, .modal .boton:hover { background: var(--sa-suave); }
.sa .boton--primario, .modal .boton--primario { border-color: var(--color-primario); }
.sa .boton--primario:hover, .modal .boton--primario:hover { background: var(--color-primario-oscuro); }
.sa .boton--chico { min-height: 32px; padding: 4px 14px; font-size: .84rem; }
.sa .boton:focus-visible, .modal .boton:focus-visible { outline: 2px solid var(--color-principal); outline-offset: 2px; }
.sa .campo__control, .modal .campo__control { border-color: var(--sa-borde); border-radius: 14px; padding: 9px 14px; min-height: 42px; }
.modal { border-radius: 26px; }
@media (max-width: 600px) { .modal { border-radius: 24px 24px 0 0; } }

.sa .tabla__celda, .modal .tabla__celda { padding: 12px 14px; border-bottom-color: var(--sa-linea); }
.sa .tabla__celda--encabezado, .modal .tabla__celda--encabezado {
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding-top: 12px; padding-bottom: 10px;
}
.sa .tabla tbody tr:last-child .tabla__celda { border-bottom: 0; }
@media (hover: hover) {
  .sa .tabla tbody tr:not(:has(.tabla__vacia)):hover { background: #f6f7fa; }
  .sa .tabla tbody tr:not(:has(.tabla__vacia)):hover > :first-child { box-shadow: none; }
}

/* ---------- Estructura: menú a la izquierda, contenido a la derecha ---------- */
.sa { display: grid; grid-template-columns: var(--sa-menu) minmax(0, 1fr); min-height: 100dvh;
  background: linear-gradient(to right, var(--color-principal) var(--sa-menu), transparent 0); }
.sa-menu {
  position: sticky; top: 0; height: 100dvh;
  display: flex; flex-direction: column; gap: 22px;
  padding: 22px 14px 18px; background: var(--color-principal); color: #e6ebf1;
}
.sa-menu__marca { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.sa-menu__sello { padding: 3px 9px; border-radius: 999px; background: rgb(255 255 255 / 10%); font-size: .72rem; font-weight: 700; color: #c9d4e2; }
.sa-menu__enlaces { display: grid; gap: 2px; }
.sa-menu__enlace {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: 12px; background: none;
  font: inherit; font-weight: 600; color: #a3b0bf; text-align: left; cursor: pointer;
}
.sa-menu__enlace i { width: 18px; text-align: center; }
.sa-menu__enlace:hover { background: rgb(255 255 255 / 6%); color: #fff; }
.sa-menu__enlace[aria-current="page"] { background: rgb(255 255 255 / 10%); color: #fff; }
.sa-menu__enlace:focus-visible { outline: 2px solid #5aa2ec; outline-offset: 1px; }
.sa-menu__pie { margin-top: auto; display: grid; gap: 10px; padding: 0 8px; }
.sa-menu__operador { font-size: .82rem; color: #a3b0bf; line-height: 1.4; }
.sa-menu__operador strong { display: block; color: #fff; font-size: .92rem; }
.sa-menu__salir {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 999px;
  background: none; color: #e6ebf1; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.sa-menu__salir:hover { background: rgb(255 255 255 / 8%); }

.sa-contenido { min-width: 0; padding: 30px 36px 56px; width: 100%; }

@media (max-width: 900px) {
  .sa { grid-template-columns: minmax(0, 1fr); background: none; }
  .sa-menu { position: sticky; top: 0; z-index: 20; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; }
  .sa-menu__marca img { width: 84px; height: auto; }
  .sa-menu__pie { margin: 0 0 0 auto; padding: 0; }
  .sa-menu__operador { display: none; }
  .sa-menu__enlaces { order: 3; flex-basis: 100%; display: flex; overflow-x: auto; scrollbar-width: none; gap: 4px; }
  .sa-menu__enlace { width: auto; flex: none; padding: 8px 12px; white-space: nowrap; }
  .sa-contenido { padding: 20px 16px 40px; }
}

/* ---------- Cabecera de sección ---------- */
.sa-cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px 18px; flex-wrap: wrap; margin-bottom: 20px; }
.sa-cabecera__titulo { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -.025em; }
.sa-cabecera__sub { margin: 4px 0 0; color: var(--color-texto-suave); font-size: .92rem; max-width: 70ch; }
.sa-subtitulo { margin: 28px 0 10px; font-size: 1.1rem; font-weight: 700; }
.sa-nota { color: var(--color-texto-suave); font-size: .88rem; margin: 6px 0 12px; }
.sa-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.sa-filtros .campo__control { width: auto; min-width: 220px; }
.sa-fecha { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; color: var(--color-texto-suave); }
.sa-filtros .sa-fecha .campo__control { min-width: 0; width: auto; }
.sa-pildoras { display: flex; gap: 6px; flex-wrap: wrap; }
.sa-pildora {
  padding: 7px 16px; border: 1px solid var(--sa-borde); border-radius: 999px; background: var(--color-superficie);
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--color-texto); cursor: pointer;
}
.sa-pildora:hover { background: var(--sa-suave); }
.sa-pildora--activa, .sa-pildora--activa:hover { background: var(--color-principal); border-color: var(--color-principal); color: #fff; }

/* ---------- Tarjetas ---------- */
.sa-tarjeta { background: var(--color-superficie); border-radius: var(--sa-radio); box-shadow: var(--sa-sombra); padding: 6px 10px; }
.sa-desplazable { overflow-x: auto; overflow-y: hidden; }
.sa-tarjeta__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 14px 6px; }
.sa-tarjeta__titulo { margin: 0; font-size: 1.1rem; font-weight: 700; }
.sa-tarjeta__sub { margin: 2px 0 0; font-size: .86rem; color: var(--color-texto-suave); }

/* ---------- Tablero ---------- */
.tb { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.tb__ancho { grid-column: 1 / -1; }
@media (max-width: 1100px) { .tb { grid-template-columns: minmax(0, 1fr); } }

.tb-mes {
  display: grid; gap: 18px; padding: 26px 28px; border-radius: var(--sa-radio);
  background: var(--color-principal); color: #fff; box-shadow: 0 10px 30px rgb(0 29 61 / 16%);
}
.tb-mes__etiqueta { font-size: .9rem; color: #c9d4e2; }
.tb-mes__cifra { margin: 4px 0 0; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.tb-mes__otra { font-size: .95rem; color: #c9d4e2; font-variant-numeric: tabular-nums; }
.tb-mes__barra { position: relative; height: 10px; border-radius: 99px; background: rgb(255 255 255 / 12%); overflow: hidden; }
.tb-mes__barra i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: #4cc38a; }
.tb-mes__hoy { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #fff; opacity: .7; }
.tb-mes__filas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tb-mes__fila span { display: block; font-size: .82rem; color: #a3b0bf; }
.tb-mes__fila strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.tb-mes__fila--mal strong { color: #ff9b94; }
@media (max-width: 600px) { .tb-mes { padding: 22px 20px; } .tb-mes__filas { grid-template-columns: 1fr 1fr; } }

.tb-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; }
.tb-cifra { padding: 18px 20px; border-radius: var(--sa-radio); background: var(--color-superficie); box-shadow: var(--sa-sombra); }
.tb-cifra__etiqueta { font-size: .84rem; color: var(--color-texto-suave); }
.tb-cifra__valor { margin-top: 6px; font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tb-cifra__valor--mal { color: var(--color-peligro); }
.tb-cifra__detalle { margin-top: 2px; font-size: .84rem; color: var(--color-texto-suave); }

.tb-grafica { padding: 8px 22px 20px; }
.tb-barras { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; align-items: end; height: 190px; margin-top: 12px; }
.tb-barras__col { display: grid; grid-template-rows: 1fr auto; gap: 8px; height: 100%; text-align: center; }
.tb-barras__pila { position: relative; border-radius: 10px; background: transparent; }
.tb-barras__esperado, .tb-barras__cobrado { position: absolute; inset: auto 0 0 0; border-radius: 10px; }
.tb-barras__esperado { background: #dbe6f2; }
.tb-barras__cobrado { background: var(--color-mar, #0466c8); }
.tb-barras__mes { font-size: .76rem; color: var(--color-texto-suave); }
.tb-barras__col--hoy .tb-barras__mes { color: var(--color-texto); font-weight: 700; }
.tb-leyenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: .84rem; color: var(--color-texto-suave); }
.tb-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }


/* ---------- Empresas ---------- */
.sa-empresa { display: grid; gap: 4px; justify-items: start; }
.sa-empresa__nombre { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--color-texto); text-align: left; cursor: pointer; }
.sa-empresa__nombre:hover { color: var(--color-enlace); text-decoration: underline; text-underline-offset: 3px; }
.sa-empresa__meta { font-size: .82rem; color: var(--color-texto-suave); }
.sa-acciones { display: flex; gap: 6px; flex-wrap: nowrap; justify-content: flex-end; }
.sa-num { font-variant-numeric: tabular-nums; }
.sa-sub { display: block; font-size: .8rem; color: var(--color-texto-suave); }

/* Estado de la empresa y del pago: píldoras de color con texto, nunca solo color. */
.sa-estado { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.sa-estado--activa, .sa-estado--al_dia { background: var(--color-exito-suave); color: var(--color-exito-texto); }
.sa-estado--prueba, .sa-estado--por_vencer { background: var(--color-primario-suave); color: var(--color-enlace); }
.sa-estado--en_gracia { background: var(--color-alerta-suave); color: var(--color-alerta); }
.sa-estado--vencido, .sa-estado--suspendida { background: var(--color-peligro-suave); color: var(--color-peligro); }
.sa-estado--cancelada, .sa-estado--sin { background: var(--sa-suave); color: var(--color-texto-suave); }

/* En línea: punto verde con texto (visto en los últimos 5 minutos). */
.sa-linea { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--color-exito-texto); white-space: nowrap; }
.sa-linea::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #1fae6b; box-shadow: 0 0 0 3px rgb(31 174 107 / 18%); }
.sa-linea--no { color: var(--color-texto-suave); font-weight: 500; }
.sa-linea--no::before { background: #c3cbd5; box-shadow: none; }

/* ---------- Ficha de la empresa (página propia) ---------- */
.sa-volver {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 6px 12px 6px 8px;
  border: 0; border-radius: 999px; background: none; font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--color-texto-suave); cursor: pointer;
}
.sa-volver:hover { background: var(--sa-suave); color: var(--color-texto); }
.sa-volver:focus-visible { outline: 2px solid var(--color-principal); outline-offset: 2px; }
.sa-panel { padding: 18px 20px 20px; min-width: 0; }
.sa-panel__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.sa-panel .tabla__celda:first-child { padding-left: 4px; }
.sa-pila { display: grid; gap: 16px; max-width: 900px; }
.sa-enlace { background: none; border: 0; padding: 0; font: inherit; font-size: .88rem; font-weight: 600; color: var(--color-enlace); cursor: pointer; }
.sa-enlace:hover { text-decoration: underline; text-underline-offset: 3px; }
.sa-interruptor { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; cursor: pointer; }
.sa-interruptor input { width: 18px; height: 18px; accent-color: var(--color-principal); }

.ficha { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); align-items: start; }
.ficha__principal, .ficha__lado { display: grid; gap: 18px; min-width: 0; }
@media (max-width: 1100px) { .ficha { grid-template-columns: minmax(0, 1fr); } }
.ficha .ficha__datos { margin-top: 16px; }
.ficha__subtitulo { margin: 14px 0 8px; font-size: .95rem; font-weight: 700; }
.ficha__subcabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ficha .ficha__alerta { margin-top: 14px; }

/* ---------- Pendientes ---------- */
.tareas { list-style: none; margin: 0; padding: 0; display: grid; }
.tarea { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; padding: 9px 0; border-bottom: 1px solid var(--sa-linea); }
.tarea:last-child { border-bottom: 0; }
.tarea__marca { display: flex; align-items: flex-start; gap: 10px; min-width: 0; cursor: pointer; }
.tarea__marca input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--color-exito-texto, #1f7a4d); cursor: pointer; }
.tarea__titulo { min-width: 0; overflow-wrap: anywhere; line-height: 1.4; }
.tarea--hecha .tarea__titulo { color: var(--color-texto-suave); text-decoration: line-through; }
.tarea__meta { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; font-size: .8rem; color: var(--color-texto-suave); }
.tarea__empresa { background: var(--sa-suave); border: 0; border-radius: 999px; padding: 2px 9px; font: inherit; font-weight: 600; color: var(--color-texto); cursor: pointer; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarea__empresa:hover { background: var(--sa-borde); }
.tarea__vence--mal { color: var(--color-peligro); font-weight: 700; }
.tarea__borrar { width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--color-texto-suave); cursor: pointer; opacity: .55; }
.tarea__borrar:hover, .tarea__borrar:focus-visible { opacity: 1; background: var(--color-peligro-suave); color: var(--color-peligro); }
@media (max-width: 600px) {
  .tarea { grid-template-columns: minmax(0, 1fr) auto; }
  .tarea__meta { grid-column: 1; grid-row: 2; justify-content: flex-start; padding-left: 28px; }
  .tarea__borrar { grid-column: 2; grid-row: 1 / 3; }
}
.tareas__vacio { margin: 4px 0 8px; color: var(--color-texto-suave); }
.tarea-nueva { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.tarea-nueva .campo__control:first-child { flex: 1 1 220px; min-width: 0; }
.tarea-nueva__fecha { flex: 0 1 160px; width: auto; }
.tarea-nueva__empresa { flex: 0 1 200px; width: auto; }
.sa-pila > .sa-tarjeta:first-child .tarea-nueva { margin-top: 0; }
.tb-pendientes { align-self: start; }
.tb-desglose { align-self: stretch; display: flex; flex-direction: column; }
.tb-desglose .tb-lista { flex: 1; max-height: 320px; }
.sa-girando { animation: sa-gira .8s linear infinite; }
@keyframes sa-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sa-girando { animation: none; } }

/* Esqueletos de carga del panel (public/js/soporte-esqueletos.js). */
.sa-esq-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.sa-esq-lista li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--sa-linea); }
.sa-esq-lista__que { flex: 1; min-width: 0; }
.sa-esq-form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; margin-top: 14px; }
.sa-esq-fila { display: flex; gap: 8px; flex-wrap: wrap; }
.sa-esq-barra { width: 100%; align-self: end; border-radius: 10px; }
.tb-barras__col:has(.sa-esq-barra) { grid-template-rows: 1fr auto; }
/* En el recuadro oscuro del mes, el gris claro deslumbra: bloques translúcidos. */
.sa-esq-oscuro .esqueleto {
  background-image: linear-gradient(90deg, rgb(255 255 255 / 8%) 25%, rgb(255 255 255 / 18%) 50%, rgb(255 255 255 / 8%) 75%);
  background-color: rgb(255 255 255 / 8%);
}
.sa-esq-oscuro .esqueleto--titulo { height: 44px; margin-top: 8px; }
@media (max-width: 600px) { .sa-esq-form { grid-template-columns: 1fr; } }

/* Vista previa del aviso: la franja tal cual la verá la empresa. */
.aviso-previa { margin: 2px 0 6px; padding: 14px; border-radius: 14px; background: var(--color-fondo, #f3f5f8); border: 1px dashed var(--color-borde-suave); }
.aviso-previa__etiqueta { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; font-size: .8rem; color: var(--color-texto-suave); }
.aviso-previa .avisos-sumar { margin: 0; }
.aviso-previa__vacio { color: var(--color-texto-suave); font-weight: 400; }
.sa-empresa__titulo { font-weight: 700; }
.aviso-detalle__texto { margin: 0 0 12px; white-space: pre-line; overflow-wrap: anywhere; }
.sa .tabla__fila--clic { cursor: pointer; }
.tb-desglose__total { font-weight: 700; font-variant-numeric: tabular-nums; }
.tb-desglose__total--ok { color: var(--color-exito-texto); }
.tb-lista { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
.tb-lista li + li { border-top: 1px solid var(--sa-linea); }
.tb-lista__fila {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%;
  padding: 10px 6px; border: 0; border-radius: 10px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.tb-lista__fila:hover { background: #f6f7fa; }
.tb-lista__fila:focus-visible { outline: 2px solid var(--color-principal); outline-offset: -2px; }
.tb-lista__que { display: grid; gap: 2px; min-width: 0; }
.tb-lista__que strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-lista__que span { font-size: .82rem; color: var(--color-texto-suave); }
.tb-lista__cuanto { display: grid; justify-items: end; gap: 4px; flex: none; font-weight: 600; }

/* ---------- Recibo de un cobro ---------- */
.recibo { border: 1px solid var(--sa-borde); border-radius: 18px; padding: 20px 22px; }
.recibo__cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px dashed var(--sa-borde); }
.recibo__numero { text-align: right; line-height: 1.2; }
.recibo__numero span { display: block; font-size: .78rem; color: var(--color-texto-suave); }
.recibo__numero strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.recibo__monto { display: grid; justify-items: start; gap: 6px; padding: 16px 0; border-bottom: 1px dashed var(--sa-borde); }
.recibo__monto > span:first-child { color: var(--color-texto-suave); }
.recibo__monto strong { font-size: 2rem; letter-spacing: -.03em; line-height: 1.1; }
.recibo__datos { display: grid; gap: 8px; margin: 14px 0 0; }
.recibo__fila { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; }
.recibo__fila dt { color: var(--color-texto-suave); font-size: .88rem; }
.recibo__fila dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .recibo { padding: 16px; } .recibo__fila { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.recibo__acciones { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 16px; }
@media print {
  body:has(.modal[open] .recibo) > :not(.modal) { display: none !important; }
  .modal[open]:has(.recibo) { position: static; box-shadow: none; max-width: none; width: auto; border: 0; }
  .modal:has(.recibo)::backdrop { display: none; }
  .modal:has(.recibo) .modal__cerrar, .recibo__acciones { display: none; }
}
.ficha__cabeza { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ficha__seccion h3 { margin: 0 0 10px; font-size: 1rem; }
.ficha__datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 18px; }
.ficha__dato > span:first-child { display: block; font-size: .8rem; color: var(--color-texto-suave); }
.ficha__dato strong { font-variant-numeric: tabular-nums; }
.ficha__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 14px; }
.ficha__acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ficha__alerta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: var(--color-peligro-suave); color: var(--color-peligro); font-weight: 600; }

.sa-ok { color: var(--color-exito-texto); font-weight: 600; }
.sa-mal { color: var(--color-peligro); font-weight: 600; }
.sa-integridad { padding: 12px 16px; border-radius: 14px; background: var(--color-superficie); box-shadow: var(--sa-sombra); }