/*
 * Forma única de la app (SDD §10.10, constitución, 2026-10-22).
 * Tablas, tarjetas, modales, botones y campos llevan las mismas esquinas
 * redondeadas y la misma sombra suave, estilo iOS, como el modal de Ver la OT.
 * Solo forma y sombra: los colores siguen siendo los del tema y del modo
 * oscuro. Va la última de las hojas para mandar sobre todas, también sobre el
 * tema «editorial», que antes ponía las esquinas rectas.
 */
:root {
  --forma-tarjeta: 1rem;     /* tarjetas, secciones, tablas, modales */
  --forma-pieza: .875rem;    /* tarjetas pequeñas dentro de otra (una OT, un aviso) */
  --forma-control: .625rem;  /* botones, campos, selectores */
  --forma-chip: .5rem;       /* sellos y etiquetas */
  --forma-sombra: 0 1px 3px rgba(15, 23, 42, .06), 0 6px 18px rgba(15, 23, 42, .05);
  --forma-sombra-alta: 0 2px 6px rgba(15, 23, 42, .08), 0 12px 28px rgba(15, 23, 42, .09);
  --forma-sombra-modal: 0 24px 60px rgba(15, 23, 42, .28);
}
html.dark {
  --forma-sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .22);
  --forma-sombra-alta: 0 2px 6px rgba(0, 0, 0, .4), 0 12px 28px rgba(0, 0, 0, .3);
  --forma-sombra-modal: 0 24px 60px rgba(0, 0, 0, .55);
}

/* Tarjetas y bloques: la «card» (TARJETA de app.js) y sus parientes. */
section.rounded, section.rounded-sm, section.rounded-lg,
details.rounded, details.rounded-sm, nav.rec,
.tarjeta-kpi, .caja-fase,
.ficha-bloque, .ficha-medidas, .ficha-siluetas, .ficha-observaciones, .ficha-cliente,
.acerca-modulo, .apariencia-opciones,
div.overflow-hidden.rounded.border {
  border-radius: var(--forma-tarjeta) !important;
}
section.rounded.border, section.rounded-sm.border, section.rounded-lg.border,
nav.rec, .tarjeta-kpi, .caja-fase, div.overflow-hidden.rounded.border {
  box-shadow: var(--forma-sombra);
}
/* Las tablas: su caja y la propia tabla, sin esquinas que asomen. */
section.overflow-x-auto, div.overflow-x-auto.border { border-radius: var(--forma-tarjeta) !important; }

/* Piezas dentro de una tarjeta. */
a.block.rounded, a.block.rounded-sm,
div.rounded, div.rounded-sm, div.rounded-lg,
ul.rounded, ul.rounded-sm, p.rounded, p.rounded-sm, label.rounded, label.rounded-sm {
  border-radius: var(--forma-pieza) !important;
}
section section.rounded, section section.rounded-sm { border-radius: var(--forma-pieza) !important; }

/* Modales. */
.modal-eldian-caja {
  border-radius: var(--forma-tarjeta) !important;
  box-shadow: var(--forma-sombra-modal) !important;
}
.modal-eldian-caja > :first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.modal-eldian-caja > :last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }

/* Botones y campos. */
button.rounded, button.rounded-sm, a.rounded:not(.block), a.rounded-sm:not(.block),
.boton-icono, .dt-pag button, .apariencia-temas button,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select, textarea, .ficha-cod {
  border-radius: var(--forma-control) !important;
}
/* El tema editorial cuadraba los botones: ahora siguen la forma común. */
html[data-tema="editorial"] [class~="inline-block"][class~="rounded"][class~="border"][class~="leading-normal"] {
  border-radius: var(--forma-control) !important;
}

/* Sellos y etiquetas (los redondos, rounded-full, no cambian). */
span.rounded, span.rounded-sm { border-radius: var(--forma-chip) !important; }

/* Al pasar el ratón, las tarjetas que se pulsan suben un poco. */
.tarjeta-kpi, .caja-fase, a.block.rounded-sm {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tarjeta-kpi:hover, .caja-fase:hover { transform: translateY(-2px); box-shadow: var(--forma-sombra-alta); }
@media (prefers-reduced-motion: reduce) {
  .tarjeta-kpi, .caja-fase, a.block.rounded-sm { transition: none; }
  .tarjeta-kpi:hover, .caja-fase:hover { transform: none; }
}

/*
 * Botones de acción de las tablas con color por acción (SDD §10.6, pedido del
 * propietario 2026-10-23). Misma acción = mismo color en toda la app: fondo
 * pastel e icono del tono fuerte; al pasar el ratón, el fondo se intensifica.
 * El color sale de data-accion (botonFila lo pone con el nombre del icono).
 */
button.boton-icono[data-accion] {
  background-color: var(--acc-bg) !important;
  color: var(--acc-fg) !important;
  border-color: var(--acc-borde) !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
button.boton-icono[data-accion]:not(:disabled):hover,
button.boton-icono[data-accion]:not(:disabled):focus-visible {
  background-color: var(--acc-fg) !important;
  color: #fff !important;
  border-color: var(--acc-fg) !important;
}
/* Ver: azul */
button.boton-icono[data-accion="ver"] { --acc-bg: #e0f2fe; --acc-fg: #0369a1; --acc-borde: #bae6fd; }
/* Editar: ámbar */
button.boton-icono[data-accion="editar"] { --acc-bg: #fef3c7; --acc-fg: #b45309; --acc-borde: #fde68a; }
/* Avanzar de fase (✓), Reactivar, Activar: verde */
button.boton-icono[data-accion="avanzar"],
button.boton-icono[data-accion="reactivar"],
button.boton-icono[data-accion="activar"] { --acc-bg: #dcfce7; --acc-fg: #15803d; --acc-borde: #bbf7d0; }
/* Comentar / enviar con comentarios: turquesa */
button.boton-icono[data-accion="comentar"] { --acc-bg: #ccfbf1; --acc-fg: #0f766e; --acc-borde: #99f6e4; }
/* Abonar: índigo */
button.boton-icono[data-accion="car-abonos"] { --acc-bg: #e0e7ff; --acc-fg: #4338ca; --acc-borde: #c7d2fe; }
/* Contraseña: violeta */
button.boton-icono[data-accion="clave"] { --acc-bg: #ede9fe; --acc-fg: #6d28d9; --acc-borde: #ddd6fe; }
/* Anular, Borrar / Quitar, Dar de baja, Desactivar: rojo */
button.boton-icono[data-accion="anular"],
button.boton-icono[data-accion="quitar"],
button.boton-icono[data-accion="baja"],
button.boton-icono[data-accion="desactivar"] { --acc-bg: #fee2e2; --acc-fg: #b91c1c; --acc-borde: #fecaca; }

/* Modo oscuro: fondo translúcido del mismo tono e icono más claro. */
html.dark button.boton-icono[data-accion="ver"] { --acc-bg: rgba(56,189,248,.16); --acc-fg: #7dd3fc; --acc-borde: rgba(56,189,248,.35); }
html.dark button.boton-icono[data-accion="editar"] { --acc-bg: rgba(251,191,36,.16); --acc-fg: #fcd34d; --acc-borde: rgba(251,191,36,.35); }
html.dark button.boton-icono[data-accion="avanzar"],
html.dark button.boton-icono[data-accion="reactivar"],
html.dark button.boton-icono[data-accion="activar"] { --acc-bg: rgba(74,222,128,.16); --acc-fg: #86efac; --acc-borde: rgba(74,222,128,.35); }
html.dark button.boton-icono[data-accion="comentar"] { --acc-bg: rgba(45,212,191,.16); --acc-fg: #5eead4; --acc-borde: rgba(45,212,191,.35); }
html.dark button.boton-icono[data-accion="car-abonos"] { --acc-bg: rgba(129,140,248,.18); --acc-fg: #a5b4fc; --acc-borde: rgba(129,140,248,.38); }
html.dark button.boton-icono[data-accion="clave"] { --acc-bg: rgba(167,139,250,.18); --acc-fg: #c4b5fd; --acc-borde: rgba(167,139,250,.38); }
html.dark button.boton-icono[data-accion="anular"],
html.dark button.boton-icono[data-accion="quitar"],
html.dark button.boton-icono[data-accion="baja"],
html.dark button.boton-icono[data-accion="desactivar"] { --acc-bg: rgba(248,113,113,.16); --acc-fg: #fca5a5; --acc-borde: rgba(248,113,113,.35); }
html.dark button.boton-icono[data-accion]:not(:disabled):hover,
html.dark button.boton-icono[data-accion]:not(:disabled):focus-visible { color: #0f172a !important; }