/* =====================================================================
   Universal Collection — estilos comunes (2026-10-11)
   Plantilla con barra lateral, componentes (botones, tablas, formularios)
   y adaptación a tablet (≤1024px) y teléfono (≤640px).
   Las pantallas pueden tener estilos propios; aquí va lo compartido.
   ===================================================================== */

/* ---------- Colores (claro / oscuro) ---------- */
:root{
  --pink-1:#FCBDD7; --pink-2:#EFA3C7; --pink-3:#FBDAE5;
  --gray-1:#96899A; --gray-2:#E0E0E0; --black:#050505;
  --accent:#b8487a;           /* rosa fuerte: enlaces, activo */
  --accent-soft:#fbe3ee;

  --bg-start:var(--pink-3); --bg-end:#ffffff;
  --text:var(--black); --muted:#4b5563;
  --card:#ffffff; --card-border:#f1e1ea;
  --shadow:rgba(239,163,199,.25);
  --input-border:#ecd3df; --focus-ring:rgba(239,163,199,.35);
  --line:#f3e6ed;

  --btn-bg:#f3e3eb; --btn-text:#3b1027; --btn-border:#ebd0de;
  --btn-primary-text:#0c0a0c;
  --btn-primary-grad:linear-gradient(90deg, var(--pink-2), var(--pink-1));
  --danger:#b42318; --danger-bg:#fdecec; --danger-border:#f5c2c2;

  --side-w:256px;
  --top-h:60px;
  --radius:12px;
}
[data-theme="dark"]{
  --bg-start:#22161f; --bg-end:#0f0c10;
  --text:#f5f6f8; --muted:#b6b7bd;
  --card:#17141a; --card-border:#2c2230;
  --shadow:rgba(239,163,199,.12);
  --input-border:#3a2a35; --focus-ring:rgba(239,163,199,.22);
  --line:#2c2230;
  --accent:#f0a6c9; --accent-soft:#2f1f2a;
  --btn-bg:#2a2630; --btn-text:#f5f6f8; --btn-border:#3a2f3c;
  --btn-primary-text:#0c0a0c;
  --btn-primary-grad:linear-gradient(90deg, #EFA3C7, #C98AAE);
  --danger:#ff8a80; --danger-bg:#3a1d1d; --danger-border:#5c2b2b;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{min-height:100%}
body{
  margin:0; color:var(--text);
  background:linear-gradient(180deg,var(--bg-start),var(--bg-end)) fixed no-repeat;
  background-color:var(--bg-end);
  font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
  line-height:1.45;
}
/* Los botones y campos usan la misma letra que la página (antes los <button> salían más chicos) */
button,input,select,textarea{font:inherit;color:inherit}
img,svg,video,canvas{max-width:100%}
.muted{color:var(--muted)}

/* ---------- Estructura: barra lateral + contenido ---------- */
.uc-shell{min-height:100vh}
.uc-side{
  position:fixed; inset:0 auto 0 0; width:var(--side-w); z-index:60;
  display:flex; flex-direction:column;
  background:var(--card); border-right:1px solid var(--card-border);
  box-shadow:0 0 40px var(--shadow);
  overflow-y:auto; overscroll-behavior:contain;
}
.uc-cuerpo{margin-left:var(--side-w); min-height:100vh; display:flex; flex-direction:column; min-width:0}
.uc-main{flex:1; width:100%; max-width:1440px; margin:0 auto; padding:20px 28px 32px; min-width:0}
.uc-pie{padding:16px; text-align:center; color:var(--muted); font-size:12px}

/* Marca */
.uc-marca{display:flex; align-items:center; gap:10px; padding:16px 16px 12px; text-decoration:none; color:var(--text); border-bottom:1px solid var(--line)}
.uc-marca img{width:38px; height:38px; border-radius:10px; object-fit:cover; background:var(--accent-soft); flex:none}
.uc-marca strong{display:block; font-size:15px; line-height:1.2}
.uc-marca small{display:block; color:var(--muted); font-size:11.5px; line-height:1.3; margin-top:2px}

/* Acciones frecuentes */
.uc-rapidas{padding:12px 12px 4px; display:grid; gap:6px}
.uc-rapidas .uc-sec{margin:0 4px 2px}
.uc-rapida{
  display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:10px;
  background:var(--btn-primary-grad); color:var(--btn-primary-text); text-decoration:none;
  font-size:14px; font-weight:600; border:0; cursor:pointer; width:100%; text-align:left;
}
.uc-rapida.sec{background:var(--accent-soft); color:var(--text); font-weight:500}
.uc-rapida:hover{filter:brightness(.97)}
.uc-sec{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}

/* Menú */
.uc-nav{padding:8px 8px 16px; flex:1}
.uc-nav a{color:inherit; text-decoration:none}
.uc-nav .uc-item, .uc-nav summary{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px;
  font-size:14.5px; cursor:pointer; list-style:none; user-select:none;
}
.uc-nav summary::-webkit-details-marker{display:none}
.uc-nav summary::after{content:""; margin-left:auto; width:7px; height:7px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(-45deg); transition:transform .15s}
.uc-nav details[open] > summary::after{transform:rotate(45deg)}
.uc-nav .uc-item:hover, .uc-nav summary:hover{background:var(--accent-soft)}
.uc-nav .uc-item.activa{background:var(--accent-soft); color:var(--accent); font-weight:700}
.uc-nav details.activa > summary{font-weight:700}
.uc-nav ul{list-style:none; margin:2px 0 6px; padding:0 0 0 30px}
.uc-nav li a{display:block; padding:7px 10px; border-radius:8px; font-size:14px; color:var(--muted)}
.uc-nav li a:hover{background:var(--accent-soft); color:var(--text)}
.uc-nav li a.activa{background:var(--accent-soft); color:var(--accent); font-weight:700}
.uc-nav svg{flex:none}

/* Barra superior */
.uc-top{
  position:sticky; top:0; z-index:40; height:var(--top-h);
  display:flex; align-items:center; gap:12px; padding:0 20px 0 28px;
  background:color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(8px); -webkit-backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--card-border);
}
.uc-hamb{display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--card-border); background:var(--card); cursor:pointer; align-items:center; justify-content:center; flex:none}
.uc-hamb span, .uc-hamb span::before, .uc-hamb span::after{display:block; width:18px; height:2px; background:var(--text); border-radius:2px; position:relative; content:""}
.uc-hamb span::before{position:absolute; top:-6px}
.uc-hamb span::after{position:absolute; top:6px}
.uc-titulo{display:none; font-weight:700; font-size:16px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.uc-top-der{margin-left:auto; display:flex; align-items:center; gap:8px; flex:none}

/* Buscador general */
.uc-buscar{position:relative}
.uc-buscar-abrir{display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--card-border); background:var(--card); cursor:pointer; align-items:center; justify-content:center; color:var(--text)}
.uc-buscar-caja{display:flex; align-items:center; gap:8px; width:min(380px, 34vw); height:40px; padding:0 10px; border:1px solid var(--card-border); border-radius:10px; background:var(--card)}
.uc-buscar-caja:focus-within{border-color:var(--pink-2); box-shadow:0 0 0 4px var(--focus-ring)}
.uc-buscar-caja .lupa{color:var(--muted); flex:none}
.uc-buscar-caja input{border:0 !important; box-shadow:none !important; background:transparent; padding:0; height:100%; min-width:0; flex:1; border-radius:0; font-size:14.5px}
.uc-buscar-caja input::-webkit-search-cancel-button{display:none}
.uc-buscar-caja .atajo{font:12px/1 ui-monospace,monospace; color:var(--muted); border:1px solid var(--card-border); border-radius:5px; padding:3px 6px}
.uc-buscar-cerrar{display:none; border:0; background:none; font-size:24px; line-height:1; cursor:pointer; color:var(--muted); padding:0 4px}
.uc-buscar-res{
  position:absolute; right:0; top:calc(100% + 8px); width:min(520px, calc(100vw - 24px)); max-height:min(70vh, 560px); overflow:auto;
  background:var(--card); border:1px solid var(--card-border); border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.16); z-index:80; padding:6px;
}
.uc-buscar-res .grupo{padding:8px 10px 4px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.uc-buscar-res .res{display:block; padding:9px 10px; border-radius:10px; text-decoration:none; color:var(--text); cursor:pointer}
.uc-buscar-res .res:hover, .uc-buscar-res .res.sel{background:var(--accent-soft)}
.uc-buscar-res .res .t{font-weight:600; font-size:14.5px}
.uc-buscar-res .res .s{font-size:12.5px; color:var(--muted); margin-top:1px}
.uc-buscar-res .acc{display:flex; flex-wrap:wrap; gap:6px; margin-top:7px}
.uc-buscar-res .acc a{font-size:12.5px; padding:4px 10px; border-radius:999px; border:1px solid var(--btn-border); background:var(--card); color:var(--text); text-decoration:none; font-weight:600}
.uc-buscar-res .acc a.principal{background:var(--btn-primary-grad); border-color:transparent; color:var(--btn-primary-text)}
.uc-buscar-res .vacio{padding:14px 12px; color:var(--muted); font-size:14px}

/* Ruta de navegación */
.uc-migas{display:flex; align-items:center; flex-wrap:wrap; gap:4px; font-size:14px; color:var(--muted); min-width:0}
.uc-migas a{color:var(--muted); text-decoration:none; padding:2px 4px; border-radius:6px}
.uc-migas a:hover{color:var(--accent); background:var(--accent-soft)}
.uc-migas .sep{opacity:.5}
.uc-migas .actual{color:var(--text); font-weight:600; padding:2px 4px}
.uc-migas-movil{display:none}

/* Menú del usuario */
.user-menu{position:relative}
.user-btn{display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--card-border); border-radius:999px; padding:6px 12px 6px 6px; cursor:pointer; color:var(--text); max-width:240px}
.user-btn .ini{width:28px; height:28px; border-radius:50%; background:var(--btn-primary-grad); display:grid; place-items:center; font-weight:700; font-size:13px; flex:none; color:#3b1027}
.user-btn .nom{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px}
.user-dd{position:absolute; right:0; top:calc(100% + 8px); background:var(--card); border:1px solid var(--card-border); border-radius:14px; box-shadow:0 18px 40px var(--shadow); min-width:250px; display:none; color:var(--text); overflow:hidden; z-index:70}
.user-dd.open{display:block}
.user-dd .item{padding:10px 14px; display:flex; justify-content:space-between; align-items:center; gap:12px}
.user-dd .item + .item{border-top:1px solid var(--card-border)}
.user-dd .item-button{display:block; width:100%; background:transparent; border:0; padding:10px 14px; text-align:left; color:inherit; cursor:pointer}
.user-dd .item-button:hover{background:var(--accent-soft)}

/* Interruptor (modo oscuro) */
.switch{position:relative; display:inline-block; width:44px; height:24px; flex:none}
.switch input{display:none}
.slider{position:absolute; cursor:pointer; inset:0; background:#bfbfc7; border-radius:999px; transition:.2s}
.slider:before{content:""; position:absolute; height:18px; width:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s}
.switch input:checked + .slider{background:#9f7aa5}
.switch input:checked + .slider:before{transform:translateX(20px)}

/* Velo detrás del menú en teléfono/tablet */
.uc-velo{display:none}

/* ---------- Componentes ---------- */
.card{background:var(--card); border:1px solid var(--card-border); border-radius:16px; box-shadow:0 18px 40px var(--shadow); padding:24px}
/* Un formulario en recuadro no se estira a toda la pantalla en escritorio */
.uc-main form.card{max-width:880px}

/* Ayudas que ya usaban algunas pantallas */
.flash{margin-bottom:12px; padding:10px 12px; border-radius:10px; background:var(--card); border:1px solid var(--card-border)}
.separator{height:6px; width:100%; border-radius:999px; background:linear-gradient(90deg, var(--pink-2), transparent); opacity:.6; margin:10px 0 20px}
.field{margin-bottom:18px}
.label{display:block; font-weight:600; margin-bottom:6px}
.row{display:flex; align-items:center; gap:12px}
.row .grow{flex:1}
.actions{display:flex; gap:14px; flex-wrap:wrap}

/* Botones: misma altura y letra sean <a> o <button> */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 14px; min-height:38px; border:1px solid var(--btn-border); border-radius:10px;
  background:var(--btn-bg); color:var(--btn-text); text-decoration:none; line-height:1.2;
  cursor:pointer; white-space:nowrap; vertical-align:middle; font-size:15px; margin-right:8px;
}
.btn:hover{filter:brightness(.97)}
.btn-primary{color:var(--btn-primary-text); background:var(--btn-primary-grad); border-color:transparent; font-weight:600}
.btn-muted,.btn-light,.btn-secondary,.btn-neutral,.btn-outline{background:var(--card); border-color:var(--card-border); color:var(--text)}
.btn-danger{background:var(--danger-bg); border-color:var(--danger-border); color:var(--danger)}
.btn-success{background:#e9f9ef; border-color:#c6f0d6; color:#0f5132}
.btn[disabled],button[disabled]{opacity:.55; cursor:not-allowed}

/* Enlaces de acción en tablas (Editar, Eliminar, Pagos…) */
.uc-link,.link{
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  padding:6px 12px; min-height:32px; border-radius:9px; border:1px solid var(--btn-border);
  background:var(--btn-bg); color:var(--btn-text); text-decoration:none; font-size:14px; font-weight:600;
  line-height:1.2; cursor:pointer; white-space:nowrap; vertical-align:middle;
}
.uc-link:hover,.link:hover{filter:brightness(.96)}
.link-danger{background:var(--danger-bg); border-color:var(--danger-border); color:var(--danger)}

/* Celdas con varias acciones: en una línea, alineadas y con el mismo espacio.
   Los <form> de Eliminar/Anular ya no bajan a otro renglón. */
td form{display:inline-flex; margin:0; vertical-align:middle}
td > a, td > button, td > form{margin:2px 2px}
td .btn, td button.btn{font-size:14px; padding:6px 12px; min-height:32px; margin:2px}
td.actions, td.actions-cell, td.acciones, td.acc, td.text-right, td.right, td.uc-acciones{white-space:nowrap}
td.uc-acciones > *, td.uc-acciones .actions > *{vertical-align:middle}
td .actions{flex-wrap:nowrap; align-items:center}

/* Tablas */
.uc-table,.table{width:100%; border-collapse:collapse}
.uc-table th,.uc-table td,.table th,.table td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle}
.uc-table th,.table th{font-size:13px; color:var(--muted); font-weight:700}
.uc-tabla-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* Códigos y fechas cortos en una sola línea (los marca app.js) */
td.uc-nw{white-space:nowrap}
.uc-tabla-scroll{max-width:100%}

/* Formularios (igual que la plantilla anterior: ancho completo y bordes redondeados) */
input,select,textarea{
  width:100%; max-width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--input-border); background:var(--card); color:var(--text); outline:none;
}
input[type="checkbox"],input[type="radio"],input[type="color"],input[type="file"],input[type="range"],input[type="hidden"]{width:auto; padding:0; border-radius:4px}
input[type="file"]{padding:6px 0; border:0; background:transparent}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--pink-2); box-shadow:0 0 0 4px var(--focus-ring)}

/* ---------- Avisos y diálogos ---------- */
.uc-flash{position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:10050; max-width:min(560px,calc(100vw - 32px));
  display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:12px; font-size:14px; line-height:1.4;
  box-shadow:0 8px 24px rgba(0,0,0,.12); border:1px solid; background:#eef4ff; border-color:#c9dafc; color:#1e3a6e}
.uc-flash span{white-space:pre-line}
.uc-flash button{background:none; border:0; font-size:18px; line-height:1; cursor:pointer; color:inherit; opacity:.7}
.uc-flash-success{background:#e9f9ef; border-color:#c6f0d6; color:#0f5132}
.uc-flash-error{background:#fdecec; border-color:#f5c2c2; color:#842029}
.uc-flash-warning{background:#fff7e6; border-color:#fde3a7; color:#7a4b00}
.uc-dlg-fondo{position:fixed; inset:0; background:rgba(17,24,39,.35); z-index:10100; display:flex; align-items:center; justify-content:center; padding:16px}
.uc-dlg{background:#fff; border-radius:16px; border:1px solid #efd8e5; box-shadow:0 18px 60px rgba(0,0,0,.2); width:min(420px,100%); padding:18px 20px; color:#111827}
.uc-dlg p{margin:0 0 12px; line-height:1.45; white-space:pre-line}
.uc-dlg input{width:100%; padding:10px 12px; border-radius:10px; border:1px solid #e7d5e1; font-size:14px; margin-bottom:12px}
.uc-dlg-acc{display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap}
.uc-dlg-acc button{padding:9px 14px; border-radius:10px; border:1px solid #e7d5e1; background:#fff; cursor:pointer; font-size:14px}
.uc-dlg-acc .si{background:#f2cfe0; border-color:#e7c2d6; color:#0c0a0c; font-weight:600}

/* Diálogos y avisos en modo oscuro */
[data-theme="dark"] .uc-dlg{background:var(--card); color:var(--text); border-color:var(--card-border)}
[data-theme="dark"] .uc-dlg input, [data-theme="dark"] .uc-dlg-acc button{background:#221c25; color:var(--text); border-color:var(--card-border)}
[data-theme="dark"] .uc-dlg-acc .si{background:var(--btn-primary-grad); color:var(--btn-primary-text); border-color:transparent}
[data-theme="dark"] .uc-flash{background:#1d2433; border-color:#33415c; color:#cfe0ff}
[data-theme="dark"] .uc-flash-success{background:#13261b; border-color:#25543a; color:#a9e8c2}
[data-theme="dark"] .uc-flash-error{background:#2c1517; border-color:#5c2b2f; color:#ffb4b4}
[data-theme="dark"] .uc-flash-warning{background:#2b2210; border-color:#5a4718; color:#f5d08a}
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder{color:#8d8291}
[data-theme="dark"] select option{background:var(--card); color:var(--text)}
[data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="time"], [data-theme="dark"] input[type="datetime-local"]{color-scheme:dark}
/* Enlaces sin estilo propio (el azul del navegador no se lee en oscuro). :where = no le gana a ningún estilo de pantalla */
:where([data-theme="dark"]) :where(.uc-main) a:where(:not([class])), :where([data-theme="dark"]) .pager__btn{color:var(--accent)}
/* Calendarios (FullCalendar usa sus propias variables) */
[data-theme="dark"] .fc{
  --fc-page-bg-color:var(--card); --fc-neutral-bg-color:#221c25; --fc-neutral-text-color:var(--muted);
  --fc-border-color:#33283a; --fc-today-bg-color:rgba(239,163,199,.12); --fc-list-event-hover-bg-color:#2a2230;
  --fc-highlight-color:rgba(239,163,199,.18); --fc-non-business-color:rgba(255,255,255,.03);
}
[data-theme="dark"] .fc .fc-col-header-cell-cushion, [data-theme="dark"] .fc .fc-daygrid-day-number, [data-theme="dark"] .fc .fc-list-day-cushion a{color:var(--text)}
[data-theme="dark"] .fc .fc-list-day-cushion{background:#221c25}

/* =====================================================================
   Tablet (≤1024px): el menú se abre con ☰
   ===================================================================== */
@media (max-width:1024px){
  .uc-side{transform:translateX(-100%); transition:transform .22s ease; box-shadow:none}
  body.menu-abierto .uc-side{transform:none; box-shadow:0 0 60px rgba(0,0,0,.25)}
  body.menu-abierto .uc-velo{display:block; position:fixed; inset:0; background:rgba(17,24,39,.35); z-index:55}
  body.menu-abierto{overflow:hidden}
  .uc-cuerpo{margin-left:0}
  .uc-hamb{display:inline-flex}
  .uc-top{padding:0 12px}
  .uc-top .uc-migas{display:none}
  .uc-titulo{display:block}
  .uc-migas-movil{display:flex; margin:0 0 10px; font-size:13px}
  .uc-main{padding:16px 18px 28px}
}

/* =====================================================================
   Teléfono (≤640px)
   ===================================================================== */
@media (max-width:640px){
  :root{--top-h:56px}
  .uc-main{padding:12px 12px 24px}
  .user-btn{padding:4px}
  .user-btn .nom,.user-btn .flecha{display:none}
  .card{padding:16px; border-radius:14px}
  .btn{min-height:42px}
  .uc-flash{top:8px}
  .scroll-hint{display:none !important}   /* «Desliza para ver más»: en el teléfono la tabla ya es tarjetas */

  /* Buscador: ícono en la barra; al tocarlo ocupa todo el ancho */
  .uc-buscar-abrir{display:inline-flex}
  .uc-buscar-caja{display:none}
  .uc-buscar-caja .atajo{display:none}
  body.buscando .uc-buscar-caja{display:flex; position:fixed; left:8px; right:8px; top:7px; width:auto; height:44px; z-index:90; box-shadow:0 8px 30px rgba(0,0,0,.18)}
  body.buscando .uc-buscar-cerrar{display:block}
  .uc-buscar-res{position:fixed; left:8px; right:8px; top:60px; width:auto; max-height:calc(100vh - 80px)}

  /* Filas de botones/búsqueda escritas en cada pantalla (style="display:flex"):
     en el teléfono bajan de renglón en lugar de salirse de la pantalla */
  .uc-main [style*="display:flex"], .uc-main [style*="display: flex"]{flex-wrap:wrap; min-width:0}
  .uc-main [style*="display:flex"] > *, .uc-main [style*="display: flex"] > *{min-width:0; max-width:100%}
  .uc-main form[style*="display:flex"], .uc-main form[style*="display: flex"]{width:100%}
  .uc-main form[style*="display:flex"] input[type="text"], .uc-main form[style*="display:flex"] input[type="search"],
  .uc-main form[style*="display: flex"] input[type="text"]{flex:1 1 160px; width:auto}
  /* Calendarios (citas y agenda de docentes): el título arriba y los botones debajo */
  .fc .fc-header-toolbar{flex-wrap:wrap; gap:8px; justify-content:space-between}
  .fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(2){order:-1; width:100%; text-align:center}
  .fc .fc-toolbar-title{font-size:1.15rem !important; text-transform:capitalize}
  .fc .fc-button{padding:.4rem .6rem !important; font-size:.85rem !important}
  .fc .fc-list-event-title{white-space:normal}

  /* Rejillas de 2 o más columnas escritas en la pantalla: una columna en el teléfono */
  .uc-main [style*="grid-template-columns:1fr 1fr"], .uc-main [style*="grid-template-columns: 1fr 1fr"],
  .uc-main [style*="grid-template-columns:repeat("], .uc-main [style*="grid-template-columns: repeat("]{grid-template-columns:1fr !important}
  .uc-main [style*="grid-template-columns:1fr 1fr"] > *, .uc-main [style*="grid-template-columns: 1fr 1fr"] > *,
  .uc-main [style*="grid-template-columns:repeat("] > *, .uc-main [style*="grid-template-columns: repeat("] > *{grid-column:auto !important; min-width:0}
  .uc-main h1{font-size:clamp(24px, 7vw, 32px) !important; line-height:1.15 !important; overflow-wrap:anywhere}
  .uc-main h2{font-size:clamp(20px, 6vw, 26px) !important; line-height:1.2 !important; overflow-wrap:anywhere}

  /* ---- Tablas como tarjetas: cada fila es una tarjeta con «Columna: dato» ----
     (!important porque cada pantalla trae sus propios estilos de tabla) */
  table.uc-tarjetas{display:block !important; min-width:0 !important; width:100% !important; border:0 !important; background:transparent !important; box-shadow:none !important}
  table.uc-tarjetas thead{display:none !important}
  table.uc-tarjetas tbody, table.uc-tarjetas tfoot{display:block !important}
  table.uc-tarjetas tr{
    display:block !important; margin:0 0 10px !important; padding:10px 14px !important;
    background:var(--card) !important; border:1px solid var(--card-border) !important; border-radius:12px !important;
    box-shadow:0 4px 14px var(--shadow) !important;
  }
  table.uc-tarjetas tfoot tr{background:var(--accent-soft) !important}
  table.uc-tarjetas td{
    display:flex !important; justify-content:space-between; align-items:baseline; gap:12px;
    width:auto !important; min-width:0 !important; max-width:none !important;
    padding:5px 0 !important; border:0 !important; border-bottom:1px dashed var(--line) !important;
    text-align:right !important; white-space:normal !important; background:transparent !important; position:static !important;
  }
  table.uc-tarjetas td:last-child{border-bottom:0 !important}
  table.uc-tarjetas td::before{
    content:attr(data-label); flex:none; max-width:45%;
    text-align:left; font-size:12.5px; font-weight:600; color:var(--muted);
  }
  table.uc-tarjetas td:not([data-label])::before, table.uc-tarjetas td[data-label=""]::before{content:none}
  table.uc-tarjetas td:not([data-label]), table.uc-tarjetas td[data-label=""]{justify-content:flex-start; text-align:left !important}
  /* Primera celda: título de la tarjeta */
  table.uc-tarjetas td:first-child{font-weight:700}
  table.uc-tarjetas td.uc-vacia{display:none !important}
  table.uc-tarjetas td.uc-fila-unica{display:block !important; text-align:center !important}
  table.uc-tarjetas td.uc-fila-unica::before{content:none}
  /* Celda de acciones: botones abajo, a lo ancho */
  table.uc-tarjetas td.uc-acciones{display:flex !important; flex-wrap:wrap; justify-content:stretch; gap:8px; padding-top:10px !important; border-bottom:0 !important}
  table.uc-tarjetas td.uc-acciones::before{content:none}
  /* Los botones se reparten parejo en la línea (y bajan si no caben) */
  table.uc-tarjetas td.uc-acciones > a, table.uc-tarjetas td.uc-acciones > button,
  table.uc-tarjetas td.uc-acciones > form, table.uc-tarjetas td.uc-acciones > div > a, table.uc-tarjetas td.uc-acciones > div > button,
  table.uc-tarjetas td.uc-acciones > div > form{flex:1 1 0 !important; min-width:88px; width:auto !important; margin:0 !important; float:none !important}
  table.uc-tarjetas td.uc-acciones > div{display:flex !important; flex-wrap:wrap; gap:8px; width:100%}
  table.uc-tarjetas td.uc-acciones form{display:flex !important}
  table.uc-tarjetas td.uc-acciones a, table.uc-tarjetas td.uc-acciones button{
    display:inline-flex !important; align-items:center; justify-content:center; text-align:center !important; min-height:40px; margin:0 !important;
  }
  table.uc-tarjetas td.uc-acciones form > button{width:100% !important}
  table.uc-tarjetas td input, table.uc-tarjetas td select, table.uc-tarjetas td textarea{max-width:60%}
  .uc-tabla-scroll:has(> table.uc-tarjetas){overflow:visible !important}
}