/* Temas de Trujillo Sender. Cada uno cambia colores, letras y bordes. «Época de Trujillo» es el de :root en estilo.css. */
@font-face { font-family: "Bangers"; src: url(fuentes/Bangers.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Kanit"; src: url(fuentes/Kanit-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Kanit"; src: url(fuentes/Kanit-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Press Start 2P"; src: url(fuentes/PressStart2P.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Orbitron"; src: url(fuentes/Orbitron-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url(fuentes/Cinzel-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url(fuentes/Rajdhani-Medium.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url(fuentes/Rajdhani-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Anton"; src: url(fuentes/anton-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Audiowide"; src: url(fuentes/audiowide-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Bebas Neue"; src: url(fuentes/bebas-neue-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url(fuentes/cormorant-garamond-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url(fuentes/cormorant-garamond-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Metal Mania"; src: url(fuentes/metal-mania-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Pirata One"; src: url(fuentes/pirata-one-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Share Tech Mono"; src: url(fuentes/share-tech-mono-400.woff2) format("woff2"); font-display: swap; }

/* 🌀 Shinobi Naranja — naranja intenso, azul marino y hojas verdes; letras de cómic */
html[data-tema="shinobi"] {
  --papel: #FFF5E8; --papel2: #FFE3C2; --campo: #FFFCF7; --borde: #F2C18F; --borde2: #F6D8B4; --tinta: #1E2140; --gris: #6A5B4C; --gris2: #9C8B78;
  --azul: #F07A1A; --azul2: #D9650A; --rojo: #1E2A5A; --rojo2: #C0392B; --larimar: #F07A1A; --larimar-cl: #FFE7CF; --ambar: #F07A1A; --ambar-cl: #FFEBD3;
  --palma: #2E8B57; --palma-cl: #DDF2E4; --coral: #1E2A5A; --colonial: #F7B32B; --menta: #2E8B57;
  --caoba: #1C2244; --caoba2: #2B3362; --caoba-txt: #FFF1E0; --caoba-sub: #F7B98A;
  --tit: "Bangers", "Impact", sans-serif; --txt: "Kanit", "Segoe UI", sans-serif; --tam-tit: 1.15; --r: 14px;
  --input: #fff; --hover-fila: #FFF0DE; --btn-hover: #FFD3A6; --ficha-on: #FFE0BF; --ficha-on-borde: #F07A1A;
  --franja: repeating-linear-gradient(90deg, #F07A1A 0 40px, #1E2A5A 40px 48px), #F07A1A;
}
html[data-tema="shinobi"] h1, html[data-tema="shinobi"] h2, html[data-tema="shinobi"] h3 { letter-spacing: 1px; font-weight: 400; }

/* 🗡️ Ninja de las Sombras — negro carbón con rojo sangre */

/* 🕹️ Arcade 8-Bits — rojo, azul, amarillo y verde de las consolas viejas, letra pixelada */
html[data-tema="arcade"] {
  --papel: #E8F6FF; --papel2: #CFEAFF; --campo: #FFFFFF; --borde: #1B1B1B; --borde2: #9CCCF0; --tinta: #1B1B1B; --gris: #3D4A57; --gris2: #6B7A88;
  --azul: #E52521; --azul2: #B71C1C; --rojo: #049CD8; --rojo2: #C62828; --larimar: #049CD8; --larimar-cl: #D9F1FF; --ambar: #FBD000; --ambar-cl: #FFF6C7;
  --palma: #43B047; --palma-cl: #DFF5E0; --coral: #E52521; --colonial: #FBD000; --menta: #43B047;
  --caoba: #1B1B1B; --caoba2: #3A3A3A; --caoba-txt: #FFFFFF; --caoba-sub: #FBD000;
  --tit: "Press Start 2P", monospace; --txt: "Inter", "Segoe UI", sans-serif; --mono: "Press Start 2P", monospace; --tam-tit: .62; --r: 0px;
  --input: #fff; --hover-fila: #FFF8D6; --btn-hover: #FFE45C; --ficha-on: #FFF2A8; --ficha-on-borde: #1B1B1B;
  --franja: repeating-linear-gradient(90deg, #E52521 0 16px, #FBD000 16px 32px, #43B047 32px 48px, #049CD8 48px 64px);
  --sombra: 4px 4px 0 #1B1B1B;
}
html[data-tema="arcade"] .tarjeta, html[data-tema="arcade"] .caja, html[data-tema="arcade"] .envoltura { border: 3px solid #1B1B1B; }
html[data-tema="arcade"] .btn { border: 2px solid #1B1B1B; box-shadow: 3px 3px 0 #1B1B1B; }
html[data-tema="arcade"] .tarjeta .t, html[data-tema="arcade"] .etq, html[data-tema="arcade"] .tabla th { font-size: 8.5px; line-height: 1.6; }
html[data-tema="arcade"] .tarjeta .n { --tam-n: 22px; --ancho-letra: .58; }

/* ⚡ Aura Dorada — naranja de combate, azul eléctrico y destellos dorados */
html[data-tema="aura"] {
  --papel: #FFF7EA; --papel2: #FFE6BF; --campo: #FFFDF8; --borde: #F5C27A; --borde2: #F9DDB0; --tinta: #1A1F3D; --gris: #5E5A6E; --gris2: #8F8A9C;
  --azul: #F57C00; --azul2: #E65100; --rojo: #1565C0; --rojo2: #C62828; --larimar: #1E88E5; --larimar-cl: #DCEBFC; --ambar: #FFC107; --ambar-cl: #FFF1C4;
  --palma: #2E7D32; --palma-cl: #DCEFDD; --coral: #1565C0; --colonial: #FFC107; --menta: #F57C00;
  --caoba: #0D2B5E; --caoba2: #17418A; --caoba-txt: #FFF4DE; --caoba-sub: #FFC968;
  --tit: "Bangers", "Impact", sans-serif; --txt: "Kanit", "Segoe UI", sans-serif; --tam-tit: 1.2; --r: 16px;
  --input: #fff; --hover-fila: #FFF2D9; --btn-hover: #FFD79A; --ficha-on: #FFE4B8; --ficha-on-borde: #F57C00;
  --franja: linear-gradient(90deg, #FFC107, #F57C00 35%, #1565C0 65%, #FFC107);
}
html[data-tema="aura"] h1, html[data-tema="aura"] h2, html[data-tema="aura"] h3 { letter-spacing: 1.2px; font-weight: 400; }

/* 🎯 Entrenador de Criaturas — rojo, amarillo y azul de aventura (diseño propio) */
html[data-tema="entrenador"] {
  --papel: #FFFBEA; --papel2: #FFF0B8; --campo: #FFFFFF; --borde: #F2D267; --borde2: #F8E39E; --tinta: #1B2A4A; --gris: #546079; --gris2: #8A93A8;
  --azul: #2A75BB; --azul2: #1D5A93; --rojo: #E3350D; --rojo2: #C62B0A; --larimar: #3DA9E0; --larimar-cl: #DDF0FB; --ambar: #FFCB05; --ambar-cl: #FFF4C2;
  --palma: #3E9B3E; --palma-cl: #DFF2DC; --coral: #E3350D; --colonial: #FFCB05; --menta: #2A75BB;
  --caoba: #2A75BB; --caoba2: #3B87CC; --caoba-txt: #FFFFFF; --caoba-sub: #FFE36B;
  --tit: "Kanit", "Segoe UI", sans-serif; --txt: "Kanit", "Segoe UI", sans-serif; --tam-tit: 1.1; --r: 18px;
  --input: #fff; --hover-fila: #FFF6D1; --btn-hover: #FFE48A; --ficha-on: #FFF0B8; --ficha-on-borde: #E3350D;
  --franja: linear-gradient(90deg, #E3350D 0 33%, #FFCB05 33% 66%, #2A75BB 66%);
}
html[data-tema="entrenador"] h1, html[data-tema="entrenador"] h2, html[data-tema="entrenador"] h3 { font-weight: 700; letter-spacing: .3px; }
html[data-tema="entrenador"] .tarjeta { border-top: 4px solid var(--ambar); }

/* 🕶️ Agente Secreto — esmoquin negro, oro y letras de lujo */
html[data-tema="agente"] {
  --papel: #0F0F11; --papel2: #1B1B1F; --campo: #161619; --borde: #3A3424; --borde2: #26241E; --tinta: #EEE9DD; --gris: #A39C8A; --gris2: #7A7466;
  --azul: #C9A227; --azul2: #A9861A; --rojo: #8E1B1B; --rojo2: #E05A5A; --larimar: #C9A227; --larimar-cl: #26210F; --ambar: #C9A227; --ambar-cl: #1E1B12;
  --palma: #6BBF8A; --palma-cl: #14231A; --coral: #8E1B1B; --colonial: #C9A227; --menta: #7A7466;
  --caoba: #070708; --caoba2: #1A1A1D; --caoba-txt: #EEE9DD; --caoba-sub: #C9A227;
  --tit: "Cinzel", Georgia, serif; --txt: "Inter", "Segoe UI", sans-serif; --r: 2px; --sobre-acento: #0F0F11;
  --input: #0B0B0D; --hover-fila: #1E1D19; --btn-hover: #2A2820; --ficha-on: #26210F; --ficha-on-borde: #C9A227;
  --franja: linear-gradient(90deg, transparent, #C9A227 20%, #F3DE8A 50%, #C9A227 80%, transparent), #070708;
  --sombra: 0 6px 20px rgba(0,0,0,.5);
}
html[data-tema="agente"] h1, html[data-tema="agente"] h2 { letter-spacing: 2px; }

/* 🌙 Trujillo Sender de noche — el mismo sello, papel quemado y caoba a la luz de una lámpara */
html[data-tema="trujillo_noche"] {
  --papel: #17110C; --papel2: #231A12; --campo: #1D1610; --borde: #4A3726; --borde2: #33271B; --tinta: #F1E4CC; --gris: #BFA987; --gris2: #8F7B5E;
  --azul: #5C8FD6; --azul2: #7FA8E6; --rojo: #E0394C; --rojo2: #FF6B7C; --larimar: #4FC3D6; --larimar-cl: #14272B; --ambar: #E9A93A; --ambar-cl: #2A2012;
  --palma: #5CC28A; --palma-cl: #142419; --coral: #E2725B; --colonial: #F2C14E; --menta: #3FA796;
  --caoba: #0E0905; --caoba2: #24180E; --caoba-txt: #EEDFC4; --caoba-sub: #C9AF86;
  --tit: "Old Standard TT", Georgia, serif; --txt: Inter, "Segoe UI", sans-serif; --r: 10px;
  --input: #120D09; --hover-fila: #2A1F15; --btn-hover: #3A2B1D; --ficha-on: #1C2638; --ficha-on-borde: #5C8FD6;
  --franja: linear-gradient(90deg, #002D62 0 47%, #F1E4CC 47% 53%, #CE1126 53% 100%) top / 100% 4px no-repeat,
    linear-gradient(90deg, #CE1126 0 47%, #F1E4CC 47% 53%, #002D62 53% 100%) bottom / 100% 4px no-repeat, #0E0905;
  --sombra: 0 6px 20px rgba(0,0,0,.5);
}

/* 🌃 Night Sender — ciudad cyberpunk: todo brilla en amarillo, cian y magenta */
html[data-tema="neon"] {
  --papel: #07060F; --papel2: #12102A; --campo: #0D0B1E; --borde: #3B1F5C; --borde2: #22163F; --tinta: #F4F1FF; --gris: #A9A2D6; --gris2: #7A6FB0;
  --azul: #FCEE0A; --azul2: #FFF64D; --rojo: #FF2A6D; --rojo2: #FF5C8D; --larimar: #00F0FF; --larimar-cl: #06263A; --ambar: #FCEE0A; --ambar-cl: #26240A;
  --palma: #05FFA1; --palma-cl: #072A1E; --coral: #FF2A6D; --colonial: #FCEE0A; --menta: #00F0FF;
  --caoba: #05040C; --caoba2: #1B1240; --caoba-txt: #F4F1FF; --caoba-sub: #00F0FF;
  --tit: "Orbitron", "Segoe UI", sans-serif; --txt: "Rajdhani", "Segoe UI", sans-serif; --mono: "Share Tech Mono", monospace; --tam-tit: .9; --r: 0px; --sobre-acento: #07060F;
  --input: #05040C; --hover-fila: #1A1238; --btn-hover: #2A1D55; --ficha-on: #2A0E2A; --ficha-on-borde: #FF2A6D;
  --franja: linear-gradient(90deg, #FF2A6D, #FCEE0A 50%, #00F0FF);
  --sombra: 0 0 0 1px #FF2A6D55, 0 0 22px rgba(255,42,109,.18), 0 0 40px rgba(0,240,255,.08);
}
html[data-tema="neon"] body { font-size: 16px; letter-spacing: .3px; background: radial-gradient(ellipse at top right, #2A0E3A 0, transparent 45%), radial-gradient(ellipse at bottom left, #04263A 0, transparent 50%), #07060F; background-attachment: fixed; }
html[data-tema="neon"] .tarjeta { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); border: 1px solid #00F0FF66; }
html[data-tema="neon"] .tarjeta .n { color: #FCEE0A; text-shadow: 0 0 10px rgba(252,238,10,.7); }
html[data-tema="neon"] .btn.prim { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); box-shadow: 0 0 16px rgba(252,238,10,.6); }
html[data-tema="neon"] h1 { color: #FCEE0A; text-shadow: 0 0 6px #FCEE0A, 0 0 22px rgba(255,42,109,.8); text-transform: uppercase; }
html[data-tema="neon"] h2 { color: #00F0FF; text-shadow: 0 0 10px rgba(0,240,255,.7); text-transform: uppercase; }
html[data-tema="neon"] .lado { border-right: 2px solid #FF2A6D; box-shadow: 4px 0 24px rgba(255,42,109,.35); }
html[data-tema="neon"] .nav a.activo { box-shadow: inset 3px 0 0 #FCEE0A, 0 0 14px rgba(252,238,10,.25); }


/* 🟩 Matrix Sender — lluvia de código verde sobre negro */
html[data-tema="matrix"] {
  --papel: #020702; --papel2: #061206; --campo: #040C04; --borde: #0F3D12; --borde2: #0A260C; --tinta: #B8FFB0; --gris: #5FCB5F; --gris2: #3E8E3E;
  --azul: #00FF41; --azul2: #4DFF7A; --rojo: #FF3B3B; --rojo2: #FF6B6B; --larimar: #00FF41; --larimar-cl: #072A0D; --ambar: #C8FF00; --ambar-cl: #142006;
  --palma: #00FF41; --palma-cl: #072A0D; --coral: #FF3B3B; --colonial: #C8FF00; --menta: #00FF41;
  --caoba: #000300; --caoba2: #072A0D; --caoba-txt: #B8FFB0; --caoba-sub: #00FF41;
  --tit: "Share Tech Mono", monospace; --txt: "Share Tech Mono", monospace; --mono: "Share Tech Mono", monospace; --r: 0px; --sobre-acento: #020702;
  --input: #000; --hover-fila: #08200B; --btn-hover: #0C3311; --ficha-on: #072A0D; --ficha-on-borde: #00FF41;
  --franja: repeating-linear-gradient(90deg, #00FF41 0 2px, transparent 2px 9px), #000;
  --sombra: 0 0 0 1px #0F3D12, 0 0 16px rgba(0,255,65,.12);
}
html[data-tema="matrix"] body { background: repeating-linear-gradient(0deg, rgba(0,255,65,.025) 0 2px, transparent 2px 4px), #020702; }
html[data-tema="matrix"] h1, html[data-tema="matrix"] .tarjeta .n { text-shadow: 0 0 10px rgba(0,255,65,.8); }
html[data-tema="matrix"] h1::after { content: "_"; animation: parpadeo 1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

/* 🌌 Galaxy Sender — estrellas, amarillo de créditos iniciales y sables de luz */
html[data-tema="galaxia"] {
  --papel: #04050B; --papel2: #0E1122; --campo: #090B18; --borde: #262B4D; --borde2: #181C36; --tinta: #F3F1E6; --gris: #A7ACCB; --gris2: #6F7499;
  --azul: #FFE81F; --azul2: #FFF06B; --rojo: #FF2D2D; --rojo2: #FF6B6B; --larimar: #3FA9FF; --larimar-cl: #0A1C33; --ambar: #FFE81F; --ambar-cl: #22200A;
  --palma: #39FF7A; --palma-cl: #0A2A16; --coral: #FF2D2D; --colonial: #FFE81F; --menta: #3FA9FF;
  --caoba: #020308; --caoba2: #141833; --caoba-txt: #F3F1E6; --caoba-sub: #FFE81F;
  --tit: "Orbitron", sans-serif; --txt: "Inter", "Segoe UI", sans-serif; --tam-tit: .92; --r: 8px; --sobre-acento: #04050B;
  --input: #03040A; --hover-fila: #131736; --btn-hover: #1E2347; --ficha-on: #22200A; --ficha-on-borde: #FFE81F;
  --franja: linear-gradient(90deg, #3FA9FF, #39FF7A 50%, #FF2D2D);
}
html[data-tema="galaxia"] body { background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 80%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 60%, #FFE81F, transparent), radial-gradient(1px 1px at 85% 15%, #fff, transparent), #04050B; background-size: 340px 340px; }
html[data-tema="galaxia"] h1 { color: #FFE81F; letter-spacing: 3px; text-transform: uppercase; }

/* 🏴‍☠️ Pirate Sender — mar abierto, sombrero de paja y mapa del tesoro */
html[data-tema="pirata"] {
  --papel: #F6E9C9; --papel2: #EBD6A6; --campo: #FFF8E6; --borde: #C9A66B; --borde2: #E1C994; --tinta: #2A1A0E; --gris: #6B5536; --gris2: #977C55;
  --azul: #C8102E; --azul2: #A00C24; --rojo: #1D5A8C; --rojo2: #C8102E; --larimar: #1D8CB8; --larimar-cl: #D8EEF6; --ambar: #E8B923; --ambar-cl: #FBEEC0;
  --palma: #2E7D32; --palma-cl: #DCEFDD; --coral: #C8102E; --colonial: #E8B923; --menta: #1D8CB8;
  --caoba: #0F3A5C; --caoba2: #17507D; --caoba-txt: #FFF3D6; --caoba-sub: #E8B923;
  --tit: "Pirata One", Georgia, serif; --txt: "Kanit", "Segoe UI", sans-serif; --tam-tit: 1.15; --r: 12px;
  --input: #FFFDF5; --hover-fila: #FBEFD2; --btn-hover: #EED9A8; --ficha-on: #FBE3A0; --ficha-on-borde: #C8102E;
  --franja: repeating-linear-gradient(90deg, #E8B923 0 22px, #C8102E 22px 30px), #E8B923;
}
html[data-tema="pirata"] h1, html[data-tema="pirata"] h2 { font-weight: 400; letter-spacing: .5px; }
html[data-tema="pirata"] .caja, html[data-tema="pirata"] .tarjeta { border: 2px dashed #C9A66B; }

/* 🤘 Maiden Sender — negro de concierto, rojo sangre y letras de metal */

/* 🐒 The Monkeys — azul noche, amarillo de marca y letras gruesas: marketing con dirección */

/* 🎬 GARúa — negro editorial, blanco y rojo de cámara grabando */

/* 🔥 Casa Chopa — estilo stream dominicano: oro, negro, rojo y letra de cartel */

/* 📜 Sender Filosófico — biblioteca vieja, tinta sepia y letra clásica */
html[data-tema="filosofia"] {
  --papel: #F3ECDD; --papel2: #E6DCC5; --campo: #FBF7EE; --borde: #C9B994; --borde2: #DDD0B2; --tinta: #2C2418; --gris: #6E604A; --gris2: #998A70;
  --azul: #5B3A29; --azul2: #7A4E37; --rojo: #8B1E1E; --rojo2: #A33131; --larimar: #3E6B6B; --larimar-cl: #DDE9E6; --ambar: #A67C2E; --ambar-cl: #F3E6C6;
  --palma: #4A6B3A; --palma-cl: #E2EBDA; --coral: #8B1E1E; --colonial: #A67C2E; --menta: #3E6B6B;
  --caoba: #2C2418; --caoba2: #463A28; --caoba-txt: #F3ECDD; --caoba-sub: #C9B994;
  --tit: "Cormorant Garamond", Georgia, serif; --txt: "Cormorant Garamond", Georgia, serif; --tam-tit: 1.2; --r: 4px;
  --input: #FFFDF8; --hover-fila: #F1E8D3; --btn-hover: #E3D6B8; --ficha-on: #EAD9C8; --ficha-on-borde: #5B3A29;
  --franja: linear-gradient(90deg, transparent, #A67C2E 15%, #5B3A29 50%, #A67C2E 85%, transparent), #F3ECDD;
}
html[data-tema="filosofia"] body { font-size: 17.5px; }
html[data-tema="filosofia"] h1 { font-style: italic; letter-spacing: .5px; }
html[data-tema="filosofia"] .tarjeta .n { font-family: "Cormorant Garamond", serif; font-weight: 700; }


/* 📎 Oficina Sender — papel, carpetas y la taza del mejor jefe */

/* ⚖️ Bufete Sender — azul de traje, blanco impecable y detalles dorados */

/* 🥃 Madison Sender — agencia de los 60: crema, verde azulado y naranja */
html[data-tema="madison"] {
  --papel: #F3E7D3; --papel2: #E9D8BC; --campo: #FFF8EC; --borde: #CDB48C; --borde2: #E0CCAA; --tinta: #2B2118; --gris: #6B5A47; --gris2: #9A8770;
  --azul: #D9642B; --azul2: #B84E1C; --rojo: #2F4B4E; --rojo2: #B23A2A; --larimar: #2A9D8F; --larimar-cl: #D9EFEB; --ambar: #E9A93A; --ambar-cl: #F8E7C3;
  --palma: #2A9D8F; --palma-cl: #D9EFEB; --coral: #D9642B; --colonial: #E9A93A; --menta: #2A9D8F;
  --caoba: #2F4B4E; --caoba2: #3E6064; --caoba-txt: #F3E7D3; --caoba-sub: #E9A93A;
  --tit: "Bebas Neue", "Anton", sans-serif; --txt: "Old Standard TT", Georgia, serif; --tam-tit: 1.35; --r: 18px;
  --input: #FFFCF5; --hover-fila: #F8EDD8; --btn-hover: #E9D8BC; --ficha-on: #F8E0D0; --ficha-on-borde: #D9642B;
  --franja: linear-gradient(90deg, #2A9D8F 0 33%, #E9A93A 33% 66%, #D9642B 66%);
}
html[data-tema="madison"] h1, html[data-tema="madison"] h2 { font-weight: 400; letter-spacing: 2px; }

/* 🏙️ Imperio Sender — rascacielos de noche: negro, marfil y acero */

/* ⚗️ Lab Sender — desierto, vapor verde y tabla periódica */



@font-face { font-family: "Lobster"; src: url(fuentes/lobster-400.woff2) format("woff2"); font-display: swap; }
/* 🥤 Cola Sender — rojo de refresco clásico, blanco y letra cursiva */

/* ☕ Café Sender — greca, café colao y patio dominicano */
html[data-tema="cafe"] {
  --papel: #F5EBDD; --papel2: #EADBC6; --campo: #FFFAF2; --borde: #D1B998; --borde2: #E4D3BA; --tinta: #2E1C12; --gris: #6E5340; --gris2: #9C8068;
  --azul: #8B5A2B; --azul2: #6E4420; --rojo: #3E2418; --rojo2: #B03A2E; --larimar: #C8963E; --larimar-cl: #F5E6C8; --ambar: #C8963E; --ambar-cl: #F5E6C8;
  --palma: #5B7F3A; --palma-cl: #E4EDD8; --coral: #B03A2E; --colonial: #C8963E; --menta: #8B5A2B;
  --caoba: #3E2418; --caoba2: #5A3725; --caoba-txt: #F5EBDD; --caoba-sub: #E6C48A;
  --tit: "Lobster", Georgia, cursive; --txt: "Kanit", "Segoe UI", sans-serif; --tam-tit: 1.15; --r: 14px;
  --input: #FFFDF8; --hover-fila: #F8EEDF; --btn-hover: #E9D7BC; --ficha-on: #F1DFC4; --ficha-on-borde: #8B5A2B;
  --franja: repeating-linear-gradient(90deg, #3E2418 0 30px, #8B5A2B 30px 60px, #C8963E 60px 90px);
}
html[data-tema="cafe"] h1, html[data-tema="cafe"] h2 { font-weight: 400; }
html[data-tema="cafe"] .lado { background: radial-gradient(circle at 50% 0, #6B4128, #3E2418 60%); }
html[data-tema="cafe"] .frase-tema { background: #FFF6E8; border-left-color: #C8963E; }
html[data-tema="cafe"] .marca .icono { animation: vapor 3s ease-in-out infinite; display: inline-block; }
@keyframes vapor { 50% { transform: translateY(-3px) rotate(-4deg); } }


/* 🍌 Plátano Sender — verde de plátano, amarillo maduro y mangú */
html[data-tema="platano"] {
  --papel: #FFF8DC; --papel2: #F6EBB8; --campo: #FFFCEC; --borde: #D9C46A; --borde2: #EADB94; --tinta: #23300F; --gris: #5E6A3A; --gris2: #8C9666;
  --azul: #2E5E1A; --azul2: #3E7A24; --rojo: #B5402A; --rojo2: #D2553C; --larimar: #6B8E23; --larimar-cl: #EAF2D3; --ambar: #F4C430; --ambar-cl: #FFF1C2;
  --palma: #2E5E1A; --palma-cl: #E2EED3; --coral: #B5402A; --colonial: #F4C430; --menta: #6B8E23;
  --caoba: #2E5E1A; --caoba2: #3E7A24; --caoba-txt: #FFF8DC; --caoba-sub: #F4C430;
  --tit: "Bangers", "Impact", sans-serif; --txt: "Kanit", "Segoe UI", sans-serif; --tam-tit: 1.3; --r: 20px;
  --input: #fff; --hover-fila: #FFF3C4; --btn-hover: #F2E3A0; --ficha-on: #FFF1C2; --ficha-on-borde: #2E5E1A;
  --franja: repeating-linear-gradient(90deg, #2E5E1A 0 40px, #6B8E23 40px 70px, #F4C430 70px 110px, #A67C1A 110px 120px);
}
html[data-tema="platano"] h1, html[data-tema="platano"] h2 { font-weight: 400; letter-spacing: 1.5px; }
html[data-tema="platano"] .lado { background: linear-gradient(180deg, #2E5E1A, #1E4210); }
html[data-tema="platano"] .tarjeta .n { color: #2E5E1A; }
html[data-tema="platano"] .btn.prim { background: #F4C430; color: #23300F; border-radius: 999px; }

/* 🏪 Colmado Sender — verde de colmado, amarillo y rojo de letrero */


/* 🇩🇴 Dominican Sender — azul, blanco y rojo de la bandera */

/* los avisos de colores claros en los temas oscuros */
html[data-oscuro] .aviso { border-width: 1px; }
html[data-oscuro] .pill { filter: saturate(1.1); }
html[data-oscuro] .saludo b, html[data-oscuro] .saludo small { color: var(--tinta); }
html[data-oscuro] .prog { background: var(--borde); }
html[data-oscuro] .marco-vista { background: #fff; }
html[data-oscuro] .aviso { color: var(--tinta); }
html[data-oscuro] .aviso.ok { background: rgba(72,199,142,.12); border-color: rgba(72,199,142,.45); }
html[data-oscuro] .aviso.mal { background: rgba(255,92,111,.12); border-color: rgba(255,92,111,.5); }
html[data-oscuro] .aviso.ojo { background: rgba(245,185,66,.12); border-color: rgba(245,185,66,.5); }
html[data-oscuro] .aviso.info { background: rgba(79,140,255,.12); border-color: rgba(79,140,255,.45); }
html[data-oscuro] .contenido a:not(.btn) { color: var(--larimar); }
html[data-oscuro] .lista-rev .ojo { color: #F5B942; }
html[data-oscuro] .lista-rev .mal { color: var(--rojo2); }
html[data-oscuro] .lista-rev .bien { color: var(--palma); }
html[data-oscuro] .pill.Pendiente { background: rgba(79,140,255,.18); color: #9DBBFF; }
html[data-oscuro] .pill.Enviando { background: rgba(245,185,66,.18); color: #F5C86A; }
html[data-oscuro] .pill.Enviado, html[data-oscuro] .pill.buena, html[data-oscuro] .pill.activo { background: rgba(72,199,142,.18); color: #6EE7A8; }
html[data-oscuro] .pill.Error, html[data-oscuro] .pill.mala, html[data-oscuro] .pill.baja { background: rgba(255,92,111,.18); color: #FF8A98; }
html[data-oscuro] .pill.Pausado, html[data-oscuro] .pill.Cancelado { background: rgba(255,255,255,.08); color: var(--gris); }

/* frase del tema (Inicio y menú) */
.frase-tema { margin: 0 0 18px; padding: 14px 18px; border-left: 4px solid var(--azul); background: var(--campo); border-radius: var(--r); box-shadow: var(--sombra); }
.frase-tema q { font: italic 17px/1.4 var(--tit); quotes: "“" "”"; }
.frase-tema small { display: block; margin-top: 4px; }
.pie-app { margin-top: 14px; font-size: 11px; color: var(--caoba-sub); text-align: center; line-height: 1.5; opacity: .9; }
.pie-app q { font-style: italic; display: block; color: var(--caoba-txt); opacity: .85; margin-bottom: 4px; }

/* 🕶️ Sender 007 — el cañón del arma y el esmoquin */
html[data-tema="agente"] .marca .icono { border-radius: 50%; background: radial-gradient(circle, #0F0F11 0 30%, #2A2A2E 31% 45%, #0F0F11 46% 58%, #2A2A2E 59% 70%, #0F0F11 71%); box-shadow: 0 0 0 2px #C9A227; }
html[data-tema="agente"] h1 { text-transform: uppercase; }
html[data-tema="agente"] .tarjeta .n { color: #C9A227; }

/* 🎬 GARúa Content House — isotipo de fondo y rec en rojo: somos duros creando */

/* selector de proyecto en el menú */
.proyecto-sel { margin: -6px 0 14px; }
.proyecto-sel select { width: 100%; background: var(--caoba2); color: var(--caoba-txt); border: 1px solid var(--caoba-sub); border-radius: var(--r); padding: 7px 10px; font-weight: 700; }

/* 🎬 GARúa Dark — todo negro, logo blanco y rojo */

/* emblema propio de cada tema arriba del menú */
.marca.emblema { flex-direction: column; gap: 8px; text-align: center; }
.marca.emblema img { width: 84px; height: 84px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }

/* estadísticas: este mes resalta, el anterior queda apagado */
.semanas .actual { font-size: 1.15em; font-weight: 800; color: var(--azul); }
.semanas .previo { font-size: .78em; color: var(--gris2); margin-top: 2px; white-space: nowrap; }
.semanas tr.en-curso td { background: var(--ficha-on); }
.semanas tr.en-curso td:first-child { box-shadow: inset 4px 0 0 var(--azul); }
.leyenda { font-size: .55em; font-weight: 600; letter-spacing: 0; text-transform: none; margin-left: 10px; vertical-align: middle; }
.leyenda .l-act { color: var(--azul); } .leyenda .l-ant { color: var(--gris2); margin-left: 8px; }
.tarjetas.comparar .vs { font-weight: 800; } .tarjetas.comparar .ant { color: var(--gris2); font-size: .9em; }

/* legibilidad: las letras de título (Bebas, Anton, Bangers…) no se pegan ni se ponen en negrita falsa */
html { font-synthesis: none; }
html[data-tema] :is(h1, h2, h3, .saludo b, .marca b, .lado .lema, .frase-tema q, .tarjeta .n) { letter-spacing: .045em; word-spacing: .16em; }
html[data-tema] :is(h1, h2, h3, .saludo b) { line-height: 1.25; }
html[data-tema] .lado .lema { line-height: 1.45; }
html[data-tema] .tarjeta .n { letter-spacing: .02em; }
html[data-tema] :is(.tabla th, .etq, .tarjeta .t) { letter-spacing: .08em; }

/* nada se sale de su caja: los números de las tarjetas se ajustan al ancho, sea cual sea la letra del tema */
.tarjeta { container-type: inline-size; min-width: 0; overflow: hidden; }
.tarjeta .n { font-size: min(var(--tam-n, 30px), calc(100cqi / var(--largo, 4) * 1.55 * var(--ancho-letra, 1))); white-space: nowrap; }
.tarjeta .s, .caja, .aviso, .saludo, .frase-tema { overflow-wrap: anywhere; }
.btn { max-width: 100%; overflow-wrap: anywhere; }
html[data-tema="arcade"] :is(.btn, .pill, .nav a) { letter-spacing: 0; }
html[data-tema="neon"], html[data-tema="galaxia"] { --ancho-letra: .7; }
html[data-tema="agente"] { --ancho-letra: .85; }
.tarjeta .t { overflow-wrap: anywhere; }
.caja.barras { overflow-x: auto; }
@media (max-width: 700px) { .btn { white-space: normal; text-align: center; } }
html[data-tema="arcade"] :is(h1, h2, h3, .saludo b, .marca b, .lado .lema, .frase-tema q, .tarjeta .n) { letter-spacing: 0; word-spacing: .05em; }

/* 🌌 Galaxia: estrellas en movimiento, como entrando al hiperespacio despacito */
html[data-tema="galaxia"] body { background: #020308; }
html[data-tema="galaxia"] body::before, html[data-tema="galaxia"] body::after {
  content: ""; position: fixed; inset: -50%; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 20px 30px, #fff, transparent), radial-gradient(1.5px 1.5px at 120px 80px, #cfe8ff, transparent),
    radial-gradient(1.5px 1.5px at 200px 150px, #fff, transparent), radial-gradient(1px 1px at 300px 40px, #ffe81f, transparent),
    radial-gradient(1px 1px at 380px 220px, #fff, transparent), radial-gradient(1.5px 1.5px at 60px 260px, #9fd3ff, transparent),
    radial-gradient(1px 1px at 250px 330px, #fff, transparent), radial-gradient(1px 1px at 340px 380px, #fff, transparent);
  background-size: 400px 400px; opacity: 1; animation: viaje 90s linear infinite;
}
html[data-tema="galaxia"] body::after { background-size: 260px 260px; opacity: .6; animation-duration: 50s; filter: blur(.3px); }
html[data-tema="galaxia"] .principal { position: relative; z-index: 1; background: radial-gradient(ellipse at 80% 10%, rgba(63,169,255,.10), transparent 55%), radial-gradient(ellipse at 10% 90%, rgba(255,232,31,.06), transparent 50%); }
html[data-tema="galaxia"] .lado { position: sticky; z-index: 2; }
html[data-tema="galaxia"] .caja, html[data-tema="galaxia"] .tarjeta { background: rgba(9,11,24,.82); backdrop-filter: blur(2px); }
html[data-tema="galaxia"] h1 { color: #FFE81F; text-shadow: 0 0 18px rgba(255,232,31,.35); letter-spacing: .12em; text-transform: uppercase; }
html[data-tema="galaxia"] .frase-tema q { color: #FFE81F; }
@keyframes viaje { from { transform: translate3d(0,0,0) rotate(0deg); } to { transform: translate3d(-400px,200px,0) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { html[data-tema="galaxia"] body::before, html[data-tema="galaxia"] body::after { animation: none; } }
.tarjeta-link { display: block; color: inherit; text-decoration: none; min-width: 0; }
.tarjeta-link .tarjeta { transition: transform .12s, box-shadow .12s; cursor: pointer; height: 100%; box-sizing: border-box; }
.tarjeta-link:hover .tarjeta { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.semanas .actual a { color: inherit; text-decoration: none; border-bottom: 1px dashed currentColor; }
.semanas .actual.ok { color: var(--palma); } .semanas .actual.mal { color: var(--rojo2); }

/* WhatsApp */
.wa-item { margin-bottom: 10px; }
.wa-item .wa-msg { width: 100%; box-sizing: border-box; margin-top: 10px; font: 14px/1.5 var(--txt); resize: vertical; background: var(--input); color: var(--tinta); border: 1px solid var(--borde2); border-radius: calc(var(--r) * .6); padding: 10px; }
.wa-item.wa-hecho { opacity: .7; } .wa-item.wa-hecho .wa-msg { background: var(--papel2); }
.wa-estado { color: var(--palma); font-weight: 700; }

/* tarjetas con texto (no números): bajan de línea en vez de cortarse */
.tarjeta .n.texto { white-space: normal; font-size: 19px; line-height: 1.25; overflow-wrap: break-word; }
/* las columnas de las rejillas no se estiran más que la pantalla: las tablas anchas se mueven de lado dentro de su caja */
.dos-col > *, .rejilla > *, .rejilla3 > * { min-width: 0; }
.envoltura { max-width: 100%; overflow-x: auto; }
@media (max-width: 700px) { .datos-persona th, .datos-persona td { display: block; width: auto !important; } .datos-persona th { padding-bottom: 0; border: 0; } }

/* proyecto / producto arriba y portada */
.producto-barra { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border: 1px solid var(--borde2); border-radius: 999px; background: var(--campo); margin-bottom: 12px; font-size: 14px; max-width: 100%; }
.producto-barra img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.producto-barra .producto-ic { width: 28px; height: 28px; display: grid; place-items: center; background: var(--papel2); border-radius: 50%; }
.portada { display: flex; gap: 20px; align-items: center; background: linear-gradient(135deg, var(--caoba), var(--caoba2)); color: var(--caoba-txt); border-radius: var(--r); padding: 18px 22px; margin: 4px 0 18px; overflow: hidden; }
.portada img { width: 120px; height: 120px; object-fit: cover; border-radius: calc(var(--r) * .8); box-shadow: 0 8px 24px rgba(0,0,0,.3); flex: none; }
.portada h2 { margin: 2px 0 10px; color: inherit; font-size: 26px; }
.portada small { color: inherit !important; }
.portada-et { text-transform: uppercase; letter-spacing: .12em; opacity: .8; font-size: 11px; }
.portada-datos { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.portada-datos small { display: block; opacity: .75; font-size: 12px; } .portada-datos b { font-size: 20px; }
@media (max-width: 700px) { .portada { flex-direction: column; align-items: flex-start; } .portada img { width: 100%; height: 160px; } }

/* números que se pueden tocar: parecen botón, para llegar rápido a la data */
a.dato, .semanas .actual a { display: inline-block; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--azul) 12%, transparent); color: inherit; text-decoration: none; border: 1px solid color-mix(in srgb, var(--azul) 30%, transparent); font-weight: 700; transition: background .12s, transform .12s; }
a.dato:hover, .semanas .actual a:hover { background: color-mix(in srgb, var(--azul) 26%, transparent); transform: translateY(-1px); }
.semanas .actual a { border-bottom: 1px solid color-mix(in srgb, var(--azul) 30%, transparent); }
.semanas.libro th, .semanas.libro td { white-space: nowrap; }
.semanas.libro .ant { color: var(--gris2); background: color-mix(in srgb, var(--gris2) 7%, transparent); }
.semanas.libro tr.total td { background: var(--papel2); border-top: 2px solid var(--borde); }
.total-ordenes { display: flex !important; justify-content: space-between; align-items: center; gap: 8px; background: var(--papel2); border-radius: calc(var(--r) * .7); padding: 10px 12px !important; margin-bottom: 6px; }

/* 🇩🇴 Trujillo: los tiempos de los ingenios azucareros — caña en el menú, el central humeando de fondo */
html:not([data-tema]) .lado::after, html[data-tema="trujillo"] .lado::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: url(img/temas/cana.svg) no-repeat center bottom / 100% auto; opacity: .22; pointer-events: none; }
html[data-tema="trujillo"] .contenido, html:not([data-tema]) .contenido { background: url(img/temas/ingenio.svg) no-repeat right 24px bottom 18px / 260px auto; }
html[data-tema="trujillo"] .contenido > *, html:not([data-tema]) .contenido > * { position: relative; }
html[data-tema="trujillo"] .frase-tema { background-image: linear-gradient(90deg, rgba(127,161,74,.10), transparent 60%); }
html[data-tema="trujillo"] .tarjeta { background-image: linear-gradient(transparent 92%, rgba(59,35,20,.05) 92%); background-size: 100% 12px; }

/* 🏴‍☠️ One Sender: mar abierto, brújula, mapa del tesoro y carteles de «se busca» */
html[data-tema="pirata"] .contenido { background: url(img/temas/brujula.svg) no-repeat right 26px bottom 26px / 190px auto; }
html[data-tema="pirata"] .lado { background: linear-gradient(180deg, #0F3A5C 0%, #0B2D47 70%, #082136 100%); border-right: 6px double #E8B923; }
html[data-tema="pirata"] .lado::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; pointer-events: none; opacity: .5;
  background: radial-gradient(ellipse 30px 10px at 30px 50px, transparent 98%, #2A6E9E 100%) repeat-x; background-size: 60px 60px; animation: olas 6s linear infinite; }
@keyframes olas { from { background-position: 0 0; } to { background-position: 60px 0; } }
html[data-tema="pirata"] .tarjeta { background: linear-gradient(160deg, #F6E9C9, #EAD3A0); border: 2px solid #8B5E34 !important; box-shadow: 3px 3px 0 #8B5E34; }
html[data-tema="pirata"] .tarjeta .t::before { content: "☠ "; color: #C8102E; }
html[data-tema="pirata"] .tarjeta .n { color: #5A3818; font-family: "Pirata One", serif; }
html[data-tema="pirata"] .frase-tema { background: #F6E9C9; border-left: 6px solid #C8102E; font-family: "Pirata One", serif; }
html[data-tema="pirata"] h1::after { content: " ⚓"; font-size: .7em; }

/* 🕶️ Sender 007: expedientes clasificados, esmoquin y oro */
html[data-tema="agente"] .caja { position: relative; border-top: 3px solid #C9A227; }
html[data-tema="agente"] .frase-tema { position: relative; overflow: hidden; }
html[data-tema="agente"] .frase-tema::after { content: "CLASIFICADO"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%) rotate(-8deg); border: 2px solid #8B1A1A; color: #8B1A1A; padding: 2px 10px; font: 700 12px/1.4 "Courier Prime", monospace; letter-spacing: .2em; opacity: .75; }
html[data-tema="agente"] .franja { background: linear-gradient(90deg, transparent, #C9A227, transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: laser 4s ease-in-out infinite; }
@keyframes laser { 0% { background-position: -50% 0; } 100% { background-position: 150% 0; } }
html[data-tema="agente"] .tarjeta .t::before { content: "◆ "; color: #C9A227; }
html[data-tema="agente"] .tarjeta { background-image: linear-gradient(135deg, rgba(201,162,39,.06), transparent 40%); }
@media (prefers-reduced-motion: reduce) { html[data-tema="agente"] .franja, html[data-tema="pirata"] .lado::after { animation: none; } }

.hora-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borde2); background: var(--campo); color: inherit; text-decoration: none; font-size: 13px; }
.hora-btn:hover { background: var(--papel2); } .hora-btn.tienda { background: var(--ambar-cl); border-color: var(--ambar); }