/* Portal del director. Aire, tarjetas blancas redondeadas y menu lateral azul,
   al estilo de las agencias digitales. Pensado tambien para el celular. */

:root {
  --cap-navy:   #0347a5;   /* azul Capacitta */
  --cap-navy-2: #003784;
  --cap-navy-d: #002a63;
  --cap-orange: #f97316;
  --cap-orange-d: #ea580c;   /* naranja oscuro, para hover */
  --cap-orange-l: #fdba74;

  /* fondos: tonos claros del azul Capacitta, no blanco puro */
  --cap-fondo:  #e8eef8;   /* fondo de la pagina */
  --cap-panel:  #f4f8fe;   /* tarjetas y paneles */
  --cap-borde:  #d3e0f2;   /* linea de las tarjetas */
}

* { box-sizing: border-box; }
body { margin:0; font-family:'Montserrat', "Segoe UI", system-ui, Arial, sans-serif;
       font-size:14px; color:#1b2b45; background:var(--cap-fondo); }
a { color:var(--cap-navy); text-decoration:none; }
a:hover { text-decoration:underline; }
h1 { font-size:22px; margin:0 0 4px; font-weight:700; }
h2 { font-size:16px; margin:0 0 12px; font-weight:600; color:#1b2b45; }
hr { border:0; border-top:1px solid rgba(255,255,255,.22); margin:10px 16px; }

/* ------------------------------------------------------------- barra arriba */
.topbar { position:relative; display:flex; align-items:center; justify-content:space-between;
          background:var(--cap-panel); padding:12px 22px; border-bottom:1px solid var(--cap-borde); }
.hamburguesa { display:none; background:none; border:0; padding:6px; margin-right:4px;
              color:var(--cap-navy); cursor:pointer; border-radius:8px; }
.hamburguesa svg { width:24px; height:24px; display:block; }
.hamburguesa:hover { background:#e2ebf9; }

.logo { font-size:20px; font-weight:800; color:var(--cap-navy); letter-spacing:-.3px; }
.logo span { display:block; font-size:12px; font-weight:500; color:#5b6b85; letter-spacing:0; }
.logo:hover { text-decoration:none; }

.usuario { display:flex; align-items:center; gap:10px; cursor:pointer; padding:4px 6px; border-radius:8px; }
.usuario:hover { background:var(--cap-fondo); }
.avatar { width:38px; height:38px; border-radius:50%; background:var(--cap-navy); color:#fff;
          display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex:none; }
.avatar.grande { width:52px; height:52px; font-size:18px; margin:0 auto 10px; }
.usuario .datos b { display:block; font-size:14px; font-weight:600; line-height:1.2; }
.usuario .datos small { color:#5b6b85; font-size:12px; }
.chev { width:18px; height:18px; color:var(--cap-navy); }

.tarjeta-usuario { display:none; position:absolute; right:18px; top:66px; z-index:30;
                   background:var(--cap-panel); border-radius:14px; padding:22px 26px 18px; width:270px;
                   text-align:center; box-shadow:0 10px 34px rgba(10,40,90,.22); }
.tarjeta-usuario.abierta { display:block; }
.tarjeta-usuario b { display:block; font-size:15px; }
.tarjeta-usuario small { display:block; color:#5b6b85; font-size:12px; margin-bottom:16px; }
.tarjeta-usuario .cerrar { position:absolute; right:10px; top:6px; background:none; border:0;
                           font-size:20px; color:#8a97ad; cursor:pointer; padding:0 6px; }
.btn-acento { display:block; background:var(--cap-orange); color:var(--cap-navy); font-weight:700;
                padding:11px; border-radius:24px; margin-bottom:12px; }
.btn-acento:hover { background:var(--cap-orange-d); text-decoration:none; }
.enlace-salir { font-weight:600; }

/* -------------------------------------------------------------- menu lateral */
.velo { display:none; }
.cerrar-menu { display:none; }

.cuerpo { display:flex; align-items:stretch; gap:0; min-height:calc(100vh - 63px); }
/* El menu lleva el mismo azul que las cabeceras: degradado, el aro arriba, el
   naranja asomando abajo y la trama de puntos. Las tres primeras van como capas
   del fondo, que se recortan solas al elemento; los puntos necesitan el
   pseudoelemento para quedar acotados a un recuadro. */
.menu { flex:0 0 250px; padding:14px 10px; position:relative;
        background:
          radial-gradient(circle at calc(100% - 18px) 34px,
                          transparent 0 42px, rgba(255,255,255,.16) 42px 44px, transparent 45px),
          radial-gradient(circle at -34px calc(100% - 40px),
                          rgba(249,115,22,.55) 0 58px, rgba(249,115,22,0) 60px),
          linear-gradient(160deg, var(--cap-navy) 0%, var(--cap-navy-2) 55%, var(--cap-navy-d) 100%); }
.menu::after { content:""; position:absolute; right:18px; bottom:26px; width:74px; height:52px;
               opacity:.45; background-size:13px 13px; pointer-events:none;
               background-image:radial-gradient(rgba(255,255,255,.75) 1.3px, transparent 1.3px); }
.menu a { display:flex; align-items:center; gap:12px; padding:12px 14px; margin-bottom:4px;
          border-radius:10px; color:#dbe6f8; font-size:14px; }
.menu a svg { width:20px; height:20px; flex:none; }
.menu a:hover { background:rgba(255,255,255,.12); color:#fff; text-decoration:none; }
.menu a:hover svg { color:var(--cap-orange-l); }
.menu a.activo { background:#fff; color:var(--cap-navy); font-weight:600;
                 box-shadow:inset 3px 0 0 var(--cap-orange); }
.menu a.activo svg { color:var(--cap-orange); }
.menu a.salir { color:#a9c2e8; }

/* ------------------------------------------------------------------ contenido */
.panel { flex:1 1 auto; padding:22px; min-width:0; }

/* La cabecera de cada pagina lleva el fondo del login. Las figuras se anclan en
   pixeles y no en porcentajes, porque la altura cambia segun la pagina y con
   porcentajes se montaban sobre el texto en unas y desaparecian en otras. */
/* En pantalla grande la cabecera va en azul claro, un punto mas cargado que la
   de las tarjetas, para que se distinga sin llenar la pagina de azul fuerte.
   Las figuras se anclan en pixeles y no en porcentajes, porque la altura
   cambia segun la pagina y con porcentajes se montaban sobre el texto. */
.hero { position:relative; overflow:hidden; border:1px solid var(--cap-borde); border-radius:16px;
        padding:24px 26px; margin-bottom:18px; color:#1b2b45;
        display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
        background:
          radial-gradient(circle at calc(100% - 132px) 2px,
                          transparent 0 44px, rgba(3,71,165,.14) 44px 46px, transparent 47px),
          radial-gradient(circle at -44px calc(100% + 32px),
                          rgba(249,115,22,.22) 0 56px, rgba(249,115,22,0) 58px),
          linear-gradient(140deg, #eaf2fd 0%, #dde9f9 55%, #ccdef4 100%); }
.hero::before { content:""; position:absolute; right:196px; top:14px; width:74px; height:48px; opacity:.55;
                background-size:13px 13px;
                background-image:radial-gradient(rgba(3,71,165,.30) 1.3px, transparent 1.3px); }
.hero::after { content:""; position:absolute; right:-52px; top:-52px; width:172px; height:172px;
               border-radius:50%; background:rgba(3,71,165,.06); }
.hero .saludo, .hero .total { position:relative; }
.hero .saludo h1 { color:var(--cap-navy); }
.hero .saludo p { margin:0; color:#5b6b85; }
.hero .total { text-align:right; }
.hero .total span { display:block; color:#5b6b85; font-size:14px; margin-bottom:2px; }
.hero .total b { font-size:32px; color:var(--cap-navy); font-weight:700; }

.rotulo { color:#5b6b85; margin:0 0 10px; }

.tarjetas { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:18px; }
.tarjeta { flex:1 1 210px; background:var(--cap-panel); border:1px solid var(--cap-borde); border-radius:14px; padding:20px 22px; }
.tarjeta span { display:block; font-size:13px; color:#5b6b85; }
.tarjeta b { display:block; font-size:26px; margin-top:6px; color:#1b2b45; font-weight:700; }
.tarjeta b.chico { font-size:16px; }
.tarjeta.principal { flex:1 1 280px; }
.tarjeta.principal b { color:var(--cap-navy); font-size:34px; }
.tarjeta small { color:#7a89a3; display:block; margin-top:8px; }
.tarjeta.azul { position:relative; overflow:hidden; border:0; color:#fff;
                background:
                  radial-gradient(circle at calc(100% - 30px) 16px,
                                  transparent 0 40px, rgba(255,255,255,.20) 40px 42px, transparent 43px),
                  radial-gradient(circle at -40px calc(100% + 24px),
                                  rgba(249,115,22,.72) 0 54px, rgba(249,115,22,0) 56px),
                  linear-gradient(140deg, var(--cap-navy) 0%, var(--cap-navy-2) 60%, var(--cap-navy-d) 100%); }
.tarjeta.azul::after { content:""; position:absolute; right:16px; bottom:12px; width:61px; height:39px;
                       opacity:.45; background-size:13px 13px;
                       background-image:radial-gradient(rgba(255,255,255,.75) 1.3px, transparent 1.3px); }
.tarjeta.azul span, .tarjeta.azul b, .tarjeta.azul small { color:#fff; }

.bloque { background:var(--cap-panel); border:1px solid var(--cap-borde); border-radius:14px; padding:20px 22px; margin-bottom:18px; }

.boton { display:inline-block; margin-top:12px; padding:10px 22px; border:1.5px solid var(--cap-navy);
         border-radius:24px; background:transparent; color:var(--cap-navy); font-weight:600; }
.boton:hover { background:var(--cap-navy); color:#fff; text-decoration:none; }
.boton.naranja { border-color:var(--cap-orange); color:var(--cap-orange); }
.boton.naranja:hover { background:var(--cap-orange); color:#fff; }
button { padding:11px 26px; border:0; border-radius:24px; background:var(--cap-navy); color:#fff;
         font-size:14px; font-weight:600; cursor:pointer; }
button:hover { background:var(--cap-navy-d); }

table.grilla { width:100%; border-collapse:separate; border-spacing:0; }
table.grilla th:first-child { border-top-left-radius:8px; }
table.grilla th:last-child { border-top-right-radius:8px; }
table.grilla th { text-align:left; padding:10px 10px; background:#fdf0e6; border-bottom:2px solid var(--cap-orange);
                  font-size:12px; color:var(--cap-navy); text-transform:uppercase; letter-spacing:.3px; }
table.grilla td { padding:11px 10px; border-bottom:1px solid #e4ecf8; }
table.grilla tr:hover td { background:#e9f0fb; }
table.grilla tr:hover td:first-child { box-shadow:inset 3px 0 0 var(--cap-orange); }
table.grilla .der { text-align:right; }
table.grilla .cen { text-align:center; }
table.grilla .comision b, table.grilla th.comision { color:var(--cap-orange-d); }
table.grilla tr.anulada td { color:#c0392b; text-decoration:line-through; }
table.grilla tr.total td { background:#e2ebf9; font-weight:700; border-top:2px solid #e3e9f3; }

.formulario { max-width:430px; margin-bottom:26px; }
.formulario label { display:block; margin-top:14px; font-size:13px; color:#5b6b85; }
.formulario input, .formulario select { width:100%; padding:11px; border:1px solid var(--cap-borde);
       border-radius:8px; font-size:14px; background:#fff; }
.formulario input:focus, .formulario select:focus { outline:0; border-color:var(--cap-navy); }
.formulario small { display:block; color:#7a89a3; margin-top:4px; font-size:12px; }
.formulario button { margin-top:18px; }

.filtros { background:var(--cap-panel); border:1px solid var(--cap-borde); border-radius:14px; padding:16px 20px; margin-bottom:18px; }
.filtros label { margin-right:6px; font-size:13px; color:#5b6b85; }
.filtros input { padding:9px; border:1px solid #d5dfec; border-radius:8px; margin-right:14px; }
.filtros button { padding:9px 22px; }

.aviso { background:#fff8e1; border-left:4px solid #ffc107; color:#6b5200;
         padding:13px 16px; border-radius:10px; margin-bottom:18px; }
.error { background:#fdeded; border-left:4px solid #d9534f; color:#8e2420;
         padding:13px 16px; border-radius:10px; margin-bottom:18px; }
.ok    { background:#e8f6ed; border-left:4px solid #2e9e5b; color:#1c6b3c;
         padding:13px 16px; border-radius:10px; margin-bottom:18px; }
.vacio { color:#7a89a3; padding:12px 0; }

/* ---------------------------------------------------------------------- login
   Una tarjeta blanca flotando sobre el fondo: dentro, el panel azul redondeado
   con las figuras y, al lado, el formulario. En celular el panel se oculta. */
.pantalla-login { display:flex; align-items:center; justify-content:center;
                  min-height:100vh; padding:26px; background:var(--cap-fondo); }
.tarjeta-login { display:flex; width:100%; max-width:1000px; background:#fff;
                 border-radius:26px; padding:16px; gap:8px;
                 box-shadow:0 24px 60px rgba(9,40,90,.14); }

/* -- panel azul -- */
.promo { position:relative; overflow:hidden; flex:0 0 50%; display:flex; align-items:center;
         border-radius:20px; min-height:520px;
         background:linear-gradient(150deg, var(--cap-navy) 0%, var(--cap-navy-2) 60%, var(--cap-navy-d) 100%); }

/* figuras de adorno */
.promo .fig { position:absolute; display:block; }
.fig.esfera   { width:170px; height:170px; border-radius:50%; left:-92px; bottom:-58px;
                background:linear-gradient(140deg, var(--cap-orange) 0%, rgba(249,115,22,.15) 80%); }
.fig.burbuja  { width:230px; height:230px; border-radius:50%; right:-84px; bottom:-84px;
                background:rgba(255,255,255,.07); }
.fig.pastilla { width:44px; height:104px; border-radius:999px; right:78px; top:-22px;
                background:rgba(255,255,255,.16); }
.fig.aro      { width:120px; height:120px; border-radius:50%; right:16px; top:26px;
                border:2px solid rgba(255,255,255,.22); }
.fig.puntos   { width:74px; height:56px; opacity:.55;
                background-image:radial-gradient(rgba(255,255,255,.75) 1.4px, transparent 1.4px);
                background-size:13px 13px; }
.fig.puntos.arriba { right:26px; top:150px; }
.fig.puntos.abajo  { right:34px; bottom:30px; }
.fig.equis    { color:rgba(255,255,255,.35); font-size:26px; line-height:1; left:34px; top:44px; }

.promo-texto { position:relative; z-index:1; color:#fff; padding:0 clamp(28px, 4.5vw, 48px); width:100%; }
/* el logo viene en azul: asi queda blanco sobre el panel */
.promo-logo { display:block; width:190px; max-width:100%; height:auto; margin-bottom:44px;
              filter:brightness(0) invert(1); }

.promo-lema { font-size:13px; font-weight:500; letter-spacing:.6px; color:#a9c6ee; margin:0 0 10px; }
.promo-texto h1 { font-size:clamp(28px, 3.4vw, 40px); line-height:1.14; margin:0; letter-spacing:-1px;
                  font-weight:400; color:#fff; }
.promo-texto h1 b { display:block; font-weight:800; }
.promo-texto h1 span { display:block; color:#cfe0f7; }

.promo-raya { width:96px; height:2px; border-radius:2px; background:rgba(255,255,255,.35); margin:30px 0; }

.promo-datos { display:flex; align-items:center; gap:20px; }
.promo-datos b { display:block; font-size:23px; font-weight:800; }
.promo-datos span { font-size:12px; color:#cfe0f7; }
.promo-datos .sep { width:1px; height:34px; background:rgba(255,255,255,.22); }

/* -- formulario -- */
.acceso { flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:30px 22px; }
.acceso-caja { width:100%; max-width:330px; }
.acceso-logo { display:none; }   /* solo en celular: en pantalla grande la marca va en el panel */
.acceso-titulo { font-size:34px; font-weight:800; color:var(--cap-navy); margin:0; letter-spacing:-.8px; }
.acceso-bajada { font-size:14px; color:#7a89a3; margin:6px 0 0; }
.acceso-lema { font-size:23px; font-weight:800; color:var(--cap-orange); margin:4px 0 0;
               letter-spacing:-.4px; }
.acceso-form { margin-top:26px; }
.acceso-form label { display:block; font-size:13px; font-weight:600; color:#41506a; margin:0 0 6px; }

.campo { display:flex; align-items:stretch; overflow:hidden; border-radius:999px; margin-bottom:16px;
         border:1px solid #d5dfec; background:#fff; transition:border-color .15s, box-shadow .15s; }
.campo:focus-within { border-color:var(--cap-navy); box-shadow:0 0 0 3px rgba(3,71,165,.12); }
.campo input { flex:1 1 auto; border:0; padding:12px 18px; font-size:14px; font-family:inherit;
               min-width:0; background:transparent; }
.campo input:focus { outline:0; }
.campo input::placeholder { color:#aab6c8; }
.campo .ojo { flex:0 0 42px; border:0; background:transparent; color:#b3c0d4; cursor:pointer; padding:0; }
.campo .ojo svg { width:18px; height:18px; }
.campo .ojo:hover, .campo .ojo.activo { color:var(--cap-orange); }

.acceso-boton { width:100%; margin-top:10px; padding:13px; border-radius:999px; font-size:15px;
                font-weight:700; background:var(--cap-navy); color:#fff; border:0; cursor:pointer;
                box-shadow:0 10px 22px rgba(3,71,165,.24); }
.acceso-boton:hover { background:var(--cap-navy-2); }
.acceso-boton:active { transform:scale(.99); }

/* En celular no se esconde el panel: pasa a ser la cabecera azul, y el
   formulario sube por encima como una hoja blanca de esquinas redondeadas. */
@media (max-width: 900px) {
  .pantalla-login { padding:0; background:var(--cap-navy-d); align-items:stretch; }
  .tarjeta-login { flex-direction:column; max-width:none; width:100%;
                   padding:0; gap:0; border-radius:0; box-shadow:none; background:transparent; }

  .promo { flex:none; min-height:0; border-radius:0; padding:40px 0 56px; }
  /* en vertical estas dos se cruzan con el texto */
  .fig.equis, .fig.puntos.abajo { display:none; }
  .fig.esfera { left:-78px; bottom:-96px; }
  .fig.puntos.arriba { top:auto; bottom:96px; right:22px; }
  /* en vertical todo el encabezado va centrado; las etiquetas del
     formulario se quedan a la izquierda, que es donde se leen mejor */
  .promo-texto { padding:0 26px; text-align:center; }
  .promo-logo { width:168px; margin:0 auto 24px; }
  .promo-datos { justify-content:center; }
  .acceso-titulo, .acceso-lema { text-align:center; }
  .promo-lema { font-size:12px; }
  .promo-texto h1 { font-size:29px; }
  .promo-raya { margin:22px auto; }
  .promo-datos b { font-size:20px; }

  .acceso { position:relative; z-index:1; flex:1 1 auto; margin-top:-28px; min-height:0;
            background:#fff; border-radius:28px 28px 0 0; padding:34px 24px 44px;
            align-items:flex-start; }
  .acceso-caja { max-width:none; }
  .acceso-logo { display:none; }   /* la marca ya esta en la cabecera */
  .acceso-titulo { font-size:27px; }
}

/* pantallas cortas: se recorta la cabecera para que el boton entre sin bajar */
@media (max-width: 900px) and (max-height: 720px) {
  .promo { padding:26px 0 44px; }
  .promo-logo { width:148px; margin-bottom:16px; }
  .promo-texto h1 { font-size:25px; }
  .promo-raya, .promo-datos { display:none; }   /* la raya sola queda colgando */
  .acceso { padding-top:26px; }
  .acceso-titulo { font-size:24px; }
}

/* ------------------------------------------------------------------- celular */
@media (max-width: 820px) {
  .topbar { padding:10px 14px; }
  .usuario .datos { display:none; }
  .tarjeta-usuario { right:10px; top:60px; }
  .hamburguesa { display:block; }
  .topbar { justify-content:flex-start; }
  .topbar .usuario { margin-left:auto; }
  .cuerpo { flex-direction:column; }
  /* el menu es un cajon estrecho que se desliza sobre el contenido; el fondo
     con las figuras ya viene de la regla general */
  .menu { position:fixed; top:0; left:0; z-index:50; width:225px; max-width:78%;
          height:100%; padding:44px 8px 16px; overflow-y:auto;
          transform:translateX(-102%); transition:transform .22s ease; }
  .menu.abierto { transform:none; box-shadow:4px 0 20px rgba(0,0,0,.3); }
  .menu a { margin-bottom:2px; font-size:14px; padding:11px 12px; }
  .menu hr { margin:8px 12px; }
  .cerrar-menu { display:block; position:absolute; top:6px; right:8px; background:none;
                 border:0; color:#fff; font-size:26px; line-height:1; padding:4px 10px;
                 cursor:pointer; border-radius:8px; }
  .velo.visible { display:block; position:fixed; inset:0; z-index:45;
                  background:rgba(10,25,50,.55); }
  body.sin-scroll { overflow:hidden; }
  .panel { padding:14px; }

  /* barra superior azul, en el mismo tono que la cabecera del login.
     Las figuras van como capas del fondo y no como pseudoelementos: la barra
     no puede llevar overflow:hidden porque recortaria la tarjeta del usuario,
     que cuelga por debajo. */
  .topbar { border-bottom:0;
            background:
              radial-gradient(circle at calc(100% - 128px) -14px,
                              transparent 0 38px, rgba(255,255,255,.20) 38px 40px, transparent 41px),
              radial-gradient(circle at calc(100% - 26px) 66px,
                              rgba(255,255,255,.10) 0 54px, transparent 56px),
              linear-gradient(140deg, var(--cap-navy) 0%, var(--cap-navy-2) 70%, var(--cap-navy-d) 100%); }

  .logo { color:#fff; }
  .logo span { color:#bcd3f2; }
  .hamburguesa { color:#fff; }
  .hamburguesa:hover { background:rgba(255,255,255,.15); }
  .avatar { background:#fff; color:var(--cap-navy); }
  .chev { color:#fff; }

  /* en el celular la cabecera si va en azul fuerte: es lo primero que se ve al
     entrar y no compite con nada, porque el panel lateral esta oculto */
  .hero { display:block; border:0; border-radius:18px; padding:22px 20px; color:#fff;
          background:
            radial-gradient(circle at calc(100% - 34px) 22px,
                            transparent 0 46px, rgba(255,255,255,.20) 46px 48px, transparent 49px),
            radial-gradient(circle at -46px calc(100% + 30px),
                            rgba(249,115,22,.78) 0 62px, rgba(249,115,22,0) 64px),
            linear-gradient(140deg, var(--cap-navy) 0%, var(--cap-navy-2) 60%, var(--cap-navy-d) 100%); }
  .hero::before { right:24px; bottom:20px; top:auto; width:74px; height:52px;
                  background-image:radial-gradient(rgba(255,255,255,.75) 1.3px, transparent 1.3px); }
  .hero::after { right:-46px; top:-46px; width:158px; height:158px; background:rgba(255,255,255,.09); }
  .hero .saludo h1 { color:#fff; }
  .hero .saludo p { color:#cfe0f7; }
  .hero .total { text-align:left; margin-top:18px; }
  .hero .total span { color:#cfe0f7; }
  .hero .total b { color:#fff; font-size:34px; }

  /* dos tarjetas por fila: apiladas a lo ancho se veian muy vacias */
  .tarjetas { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .tarjeta { flex:none; padding:15px 16px; }
  .tarjeta.principal, .tarjeta.azul { grid-column:1 / -1; }   /* si no, quedan solas en su fila */
  .tarjeta b { font-size:20px; }
  .tarjeta.principal b { font-size:30px; }

  /* La tabla se rompe en fichas: desplazarse a lo ancho dejaba la comision,
     que es el dato que importa, fuera de la pantalla. El rotulo de cada linea
     sale del atributo data-rotulo de la celda. */
  table.grilla { display:block; }
  table.grilla tr:first-child { display:none; }              /* la cabecera */
  table.grilla tr { display:block; background:#fff; border:1px solid var(--cap-borde);
                    border-radius:12px; padding:6px 14px; margin-bottom:10px; }
  table.grilla td { display:flex; align-items:baseline; justify-content:space-between; gap:14px;
                    padding:7px 0; border-bottom:1px solid #eef3fa; text-align:left; }
  table.grilla tr td:last-child { border-bottom:0; }
  table.grilla td:empty { display:none; }
  table.grilla td::before { content:attr(data-rotulo); flex:none; font-size:12px; color:#7a89a3; }
  table.grilla td.comision { font-size:16px; }
  table.grilla tr:hover td, table.grilla tr:hover td:first-child { background:none; box-shadow:none; }
  table.grilla tr.total { background:#e2ebf9; }
  table.grilla tr.total td { border-bottom-color:#cfdcf0; }

  /* el filtro de fechas: cada rotulo sobre su campo, y el boton a lo ancho */
  .filtros { padding:14px 16px; }
  .filtros label { display:block; margin:0 0 5px; }
  .filtros label + input { display:block; width:100%; margin:0 0 12px; }
  .filtros button { width:100%; }
}

/* ------------------------------------------------- rejilla de acciones */
.acciones { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
/* Cada tarjeta lleva su propia cabecera azul con el fondo del login: el icono
   va sobre ella, en blanco, y el texto queda abajo. */
.accion { background:#fff; border-radius:14px; padding:0 0 18px; text-align:center; overflow:hidden;
          display:flex; flex-direction:column; align-items:center; color:#1b2b45;
          border:1px solid var(--cap-borde); transition:.15s; }
.accion:hover { text-decoration:none; border-color:var(--cap-orange); transform:translateY(-2px); }
/* La cabecera va en casi blanco y no en azul: repetida en cada tarjeta, el
   azul saturaba la pantalla. Mismo juego de figuras, en tinta azul suave. */
.accion .ico { align-self:stretch; height:82px; margin:0 0 16px; position:relative; overflow:hidden;
               display:flex; align-items:center; justify-content:center; color:var(--cap-navy);
               border-bottom:1px solid var(--cap-borde);
               background:
                 radial-gradient(circle at calc(100% - 24px) 8px,
                                 transparent 0 28px, rgba(3,71,165,.13) 28px 30px, transparent 31px),
                 radial-gradient(circle at -26px calc(100% + 20px),
                                 rgba(249,115,22,.20) 0 36px, rgba(249,115,22,0) 38px),
                 linear-gradient(140deg, #ffffff 0%, #f4f8fe 55%, #e6eefa 100%); }
.accion .ico::after { content:""; position:absolute; left:15px; top:13px; width:35px; height:25px; opacity:.5;
                      background-size:11px 11px;
                      background-image:radial-gradient(rgba(3,71,165,.32) 1.2px, transparent 1.2px); }
.accion .ico svg { width:30px; height:30px; }
.accion b, .accion small, .accion .ver { padding:0 16px; }
.accion b { font-size:14px; line-height:1.35; margin-bottom:6px; }
.accion small { color:#7a89a3; font-size:12px; line-height:1.4; flex:1 1 auto; }
.accion .ver { margin-top:12px; color:var(--cap-navy); font-weight:600; font-size:13px; }

.reglas { margin:0 0 18px; padding-left:20px; line-height:1.9; color:#33455f; }
.reglas b { color:#1b2b45; }

@media (max-width: 820px) {
  /* 132px para que entren dos por fila incluso en pantallas de 360 */
  .acciones { grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:10px; }
  /* en el celular las tarjetas van de dos en dos y no saturan: ahi la cabecera
     si va en azul, como el resto de la pantalla */
  .accion { padding:0 0 16px; }
  .accion .ico { height:74px; margin:0 0 14px; color:#fff; border-bottom:0;
                 background:
                   radial-gradient(circle at calc(100% - 20px) 8px,
                                   transparent 0 26px, rgba(255,255,255,.22) 26px 28px, transparent 29px),
                   radial-gradient(circle at -26px calc(100% + 20px),
                                   rgba(249,115,22,.70) 0 34px, rgba(249,115,22,0) 36px),
                   linear-gradient(140deg, var(--cap-navy) 0%, var(--cap-navy-2) 60%, var(--cap-navy-d) 100%); }
  .accion .ico::after { left:13px; top:11px; opacity:.45;
                        background-image:radial-gradient(rgba(255,255,255,.75) 1.2px, transparent 1.2px); }
  .accion .ico svg { width:26px; height:26px; }
  .accion b, .accion small, .accion .ver { padding:0 12px; }
  .accion b { font-size:14px; }
  .accion small { font-size:12px; }
  .accion .ver { color:var(--cap-orange-d); margin-top:14px; }
  .accion:hover { transform:none; }
}