/* ═══════════════════════════════════════════════════════════════════════════
   AIMA · _COMPARTIDO/assets/aima-piel.css — LA PIEL AIMA
   ───────────────────────────────────────────────────────────────────────────
   ⚫ 30/09/2026 · Bratney: «vamos a unificar un tipo de estética AIMA, la de
   la portada y Ajustes, que es la que más me representa. Empezamos con el CRM
   (…) y ya sabes, unificamos esta forma de llevar todo en estética».

   ES ESE IDIOMA, SACADO A UN FICHERO. Los números salen de la carcasa de
   Ajustes (`#carcasa-css` de 00_PUERTA/app.html, 24/09) y de la puerta v2; no
   se inventa ninguno. Tres cosas:
     1 · las letras: AIMA Negra (Poppins 800) para lo que se lee de lejos y
         AIMA Serif (Cormorant 700) para la cifra que se quiere mirar;
     2 · los colores y las superficies, en oscuro y en claro (`--piel-*`):
         tarjeta de cristal oscuro con su pelo de luz arriba, el rojo como
         acento y el LED con su halo para lo que está encendido;
     3 · el kit: la baldosa (`.ab-tile`, la familia pesada de iconos, la pone
         `aima-baldosas.js`), la ceja y el rótulo con su raya roja, el chip
         con su LED y el icono sencillo.

   🔴 ESTE FICHERO NO PINTA NINGUNA PANTALLA: define. Cada programa lleva el
      idioma a su marcado con un fichero suyo, que va DESPUÉS de su CSS (el
      CRM: `crm/crm-piel.css`). Así, quitar la piel de un programa es quitar
      una línea, y lo de antes sigue escrito y se lee igual.
   🔴 LA LEY DEL ROJO SIGUE: el rojo es acento, no fondo. Un botón por
      pantalla, las luces de estado, la raya del rótulo y poco más.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · LAS LETRAS · las woff2 que ya viajan con la app (ni un byte de red) ─
   Los mismos nombres que la carcasa de Ajustes: si una página ya las declara,
   son la misma cara y no se pisan. */
@font-face{font-family:'AIMA Negra';font-weight:800;font-display:swap;
  src:url(mazo/fuentes/poppins-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'AIMA Negra';font-weight:700;font-display:swap;
  src:url(mazo/fuentes/poppins-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'AIMA Serif';font-weight:700;font-display:swap;
  src:url(trailers/fuentes/cormorant-garamond-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'AIMA Serif';font-weight:600;font-style:italic;font-display:swap;
  src:url(trailers/fuentes/cormorant-garamond-latin-600-italic.woff2) format('woff2')}

/* ── 2 · LOS COLORES Y LAS SUPERFICIES ─────────────────────────────────────── */
:root{
  --piel-fondo:#0B0B0D;
  --piel-tinta:#F2F2F0;
  --piel-tinta-2:rgba(242,242,240,.68);        /* los iconos sencillos en reposo */
  --piel-gris:#8A8D8F;
  --piel-rojo:#C1272D;
  --piel-led:#FE3142;
  --piel-led-halo:0 0 0 3px rgba(254,49,66,.16),0 0 12px 2px rgba(254,49,66,.7);
  --piel-verde:#34C759;
  --piel-verde-halo:0 0 0 3px rgba(52,199,89,.16),0 0 10px 1px rgba(52,199,89,.6);
  --piel-ambar:#F5A623;
  --piel-card:linear-gradient(180deg,rgba(30,30,35,.94),rgba(15,15,18,.96));
  --piel-card-plano:#18181C;
  --piel-borde:rgba(242,242,240,.085);
  --piel-borde-2:rgba(242,242,240,.16);
  --piel-sombra:inset 0 1px 0 rgba(242,242,240,.055),0 18px 40px -26px rgba(0,0,0,.95);
  --piel-sombra-alta:inset 0 1px 0 rgba(242,242,240,.07),0 26px 50px -28px rgba(0,0,0,.95);
  --piel-raya:rgba(242,242,240,.075);
  --piel-hueco:rgba(242,242,240,.06);
  --piel-rojo-g:linear-gradient(180deg,#F0363F,#B8141D);
  --piel-boton-sombra:inset 0 1px 0 rgba(255,255,255,.2),0 14px 30px -16px rgba(193,39,45,.9);
  /* la tarjeta grande (el plan, el resumen): la luz roja en la esquina */
  --piel-grande:radial-gradient(70% 120% at 100% 0%,rgba(193,39,45,.3),rgba(193,39,45,0) 60%),linear-gradient(180deg,#1B1B20,#0D0D0F);
  /* el fondo de una hoja: la de Ajustes */
  --piel-hoja:radial-gradient(120% 60% at 0% 0%,rgba(193,39,45,.20),rgba(193,39,45,0) 55%),
              radial-gradient(80% 50% at 100% 100%,rgba(193,39,45,.08),rgba(193,39,45,0) 60%),#0B0B0D;
  /* la placa en pequeño: pistas y pads muy flojos, «esto es la misma casa» */
  --piel-placa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='230' viewBox='0 0 360 230'%3E%3Cg fill='none' stroke='%23F2F2F0' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M0 40h70l20 20h90l14-14h60'/%3E%3Cpath d='M0 92h40l18 18h120l22-22h160'/%3E%3Cpath d='M210 0v30l16 16h70l18 18h46'/%3E%3Cpath d='M120 230v-40l14-14h60l18-18h148'/%3E%3Cpath d='M300 0v18l-12 12'/%3E%3C/g%3E%3Cg fill='%23F2F2F0' fill-opacity='.10'%3E%3Ccircle cx='254' cy='46' r='2.5'/%3E%3Ccircle cx='178' cy='110' r='2.5'/%3E%3Ccircle cx='90' cy='60' r='2'/%3E%3Ccircle cx='194' cy='176' r='2'/%3E%3C/g%3E%3Ccircle cx='296' cy='64' r='2.5' fill='%23FE3142' fill-opacity='.55'/%3E%3C/svg%3E");
  --piel-negra:'AIMA Negra','Poppins',sans-serif;
  --piel-serif:'AIMA Serif','AIMA Display','Cormorant Garamond',Didot,Georgia,serif;
  --piel-pop:'Poppins',sans-serif;
  --piel-mont:'Montserrat',sans-serif;
  --piel-e:cubic-bezier(.22,1,.36,1);
}
html[data-tema="claro"]{
  --piel-fondo:#F2F2F0;
  --piel-tinta:#0B0B0D;
  --piel-tinta-2:rgba(11,11,13,.66);
  --piel-gris:#5F6365;                        /* 5,42:1 sobre papel */
  --piel-card:linear-gradient(180deg,#FFFFFF,#F6F6F3);
  --piel-card-plano:#FFFFFF;
  --piel-borde:rgba(11,11,13,.085);
  --piel-borde-2:rgba(11,11,13,.16);
  --piel-sombra:inset 0 1px 0 #fff,0 14px 30px -22px rgba(11,11,13,.38);
  --piel-sombra-alta:inset 0 1px 0 #fff,0 22px 44px -26px rgba(11,11,13,.42);
  --piel-raya:rgba(11,11,13,.08);
  --piel-hueco:rgba(11,11,13,.055);
  --piel-grande:radial-gradient(70% 120% at 100% 0%,rgba(193,39,45,.12),rgba(193,39,45,0) 60%),linear-gradient(180deg,#FFFFFF,#F3F3F0);
  --piel-hoja:radial-gradient(120% 60% at 0% 0%,rgba(193,39,45,.10),rgba(193,39,45,0) 55%),#F2F2F0;
}

/* ── 3 · EL KIT ──────────────────────────────────────────────────────────── */

/* LA BALDOSA · la familia pesada. El dibujo lo pone aima-baldosas.js; aquí,
   el tamaño y la sombra, los de las filas de Ajustes. */
.ab-tile{display:inline-flex;flex:none;width:32px;height:32px;border-radius:8px;vertical-align:middle;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.7),0 0 0 .5px rgba(0,0,0,.4)}
/* 🔴 con !important: la página de al lado suele tener reglas como
   `#amiw .acc .ic svg{width:16px}` que, al meter la baldosa en su caja,
   encogían el dibujo a 16 px dentro de una baldosa de 30 (pasó en la
   ventana de AMI del CRM, 30/09). El dibujo de la baldosa llena SIEMPRE
   su baldosa. */
.ab-tile > svg{display:block !important;width:100% !important;height:100% !important}
.ab-tile.ab-20{width:20px;height:20px;border-radius:5px;box-shadow:0 2px 6px -3px rgba(0,0,0,.7)}
.ab-tile.ab-24{width:24px;height:24px;border-radius:6px;box-shadow:0 3px 8px -4px rgba(0,0,0,.7)}
.ab-tile.ab-26{width:26px;height:26px;border-radius:6.5px;box-shadow:0 3px 8px -4px rgba(0,0,0,.7)}
.ab-tile.ab-36{width:36px;height:36px;border-radius:9px}
.ab-tile.ab-44{width:44px;height:44px;border-radius:11px;box-shadow:0 8px 18px -8px rgba(0,0,0,.8),0 0 0 .5px rgba(0,0,0,.4)}
.ab-tile.ab-48{width:48px;height:48px;border-radius:12px;box-shadow:0 10px 22px -10px rgba(0,0,0,.85),0 0 0 .5px rgba(0,0,0,.4)}
html[data-tema="claro"] .ab-tile{box-shadow:0 4px 9px -5px rgba(11,11,13,.55)}

/* LA CEJA · el rótulo de encima del título, con su raya roja de 24×2 */
.piel-ceja{display:flex;align-items:center;gap:10px;font:600 10.5px/1 var(--piel-pop);letter-spacing:.24em;
  text-transform:uppercase;color:var(--piel-gris)}
.piel-ceja::before{content:'';display:block;flex:none;width:24px;height:2px;border-radius:2px;background:var(--piel-led)}

/* EL RÓTULO · entre grupos, con la raya de 18×2 (Ajustes, `.aj-rotu`) */
.piel-rotu{display:flex;align-items:center;gap:10px;font:600 10.5px/1 var(--piel-pop);letter-spacing:.22em;
  text-transform:uppercase;color:var(--piel-gris)}
.piel-rotu::before{content:'';display:block;flex:none;width:18px;height:2px;border-radius:2px;background:var(--piel-led)}

/* EL CHIP · estado dicho con su LED (Ajustes, `.aj-chip`) */
.piel-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:999px;
  background:rgba(254,49,66,.14);border:1px solid rgba(254,49,66,.45);
  font:700 10px/1 var(--piel-pop);letter-spacing:.16em;text-transform:uppercase;color:#FF8F95}
.piel-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--piel-led);box-shadow:0 0 8px rgba(254,49,66,.9)}
html[data-tema="claro"] .piel-chip{color:#C1272D}

/* EL ICONO SENCILLO · la otra familia: trazo de la casa (LENGUA-ICONOS), sin
   caja ni círculo, en la tinta al 68 % y entero al pasar. */
.piel-sencillo{color:var(--piel-tinta-2);background:none;border:0;box-shadow:none}
.piel-sencillo:hover{color:var(--piel-tinta)}
.piel-sencillo svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:miter;stroke-linecap:square}