/* Card "Holograma" (core/lib/holograma.php): ficha técnica sobria — cristal oscuro, filete cian fino, esquinas con corte pequeño.
   Capas: .holo (icono + halo mínimo) > .holo-frame (clip-path = color del filete) > .holo-body (clip-path interior). */
.holo {
  --holo: #38bdf8; --holo-soft: rgba(56, 189, 248, .22);
  --holo-bg: rgba(10, 18, 32, .94); --holo-ink: #e2e8f0; --holo-mute: #8aa0b4;
  position: relative; margin-bottom: 14px; padding-top: 12px; text-align: left;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .28));
  transition: filter .25s;
  font-family: 'Inter', system-ui, sans-serif;
}
.holo:hover { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .34)) drop-shadow(0 0 6px rgba(56, 189, 248, .22)); }
.holo--center .holo-content { text-align: center; }

/* Filete exterior de 1px con dos esquinas cortadas (superior izquierda mayor, inferior derecha menor) */
.holo-frame {
  position: relative; padding: 1px;
  background: linear-gradient(135deg, rgba(56, 189, 248, .75), rgba(56, 189, 248, .28) 55%, rgba(56, 189, 248, .5));
  clip-path: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.holo-body {
  position: relative; overflow: hidden; color: var(--holo-ink);
  background:
    linear-gradient(rgba(148, 163, 184, .035) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(148, 163, 184, .035) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--holo-bg);
  clip-path: polygon(0 14.4px, 14.4px 0, 100% 0, 100% calc(100% - 12.4px), calc(100% - 12.4px) 100%, 0 100%);
}
.holo:hover .holo-body {
  background:
    linear-gradient(rgba(148, 163, 184, .06) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(148, 163, 184, .06) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--holo-bg);
}

/* Encabezado: etiqueta pequeña y código, separados por un filete */
.holo-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px 9px 58px; min-height: 30px;
  font: 600 .66rem/1 'JetBrains Mono', ui-monospace, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.holo-title { color: var(--holo); white-space: nowrap; }
.holo-id { margin-left: auto; color: var(--holo-mute); white-space: nowrap; font-weight: 500; }
.holo-vents { display: none; }
.holo-head::after { content: ''; position: absolute; left: 0; right: 0; top: 38px; height: 1px; background: var(--holo-soft); }

.holo-content { position: relative; padding: 14px 20px 16px; }

/* Pie: dato de estado */
.holo-foot { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 9px 20px 11px;
  border-top: 1px solid var(--holo-soft); background: rgba(56, 189, 248, .03);
  font: 500 .64rem/1.2 'JetBrains Mono', ui-monospace, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--holo-mute); }
.holo-foot b { color: var(--holo-ink); font-weight: 600; }

/* Icono sobre la esquina superior izquierda: latido muy suave */
.holo-icon {
  position: absolute; z-index: 3; left: 12px; top: 0; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; border: 1px solid var(--holo); color: var(--holo); font-size: .95rem;
  background: rgb(12, 22, 38);
  animation: holoPulse 3.4s ease-in-out infinite;
}
.holo:hover .holo-icon { animation-duration: 2s; }
@keyframes holoPulse {
  0%, 100% { transform: scale(1);    opacity: .85; box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
  50%      { transform: scale(1.06); opacity: 1;   box-shadow: 0 0 10px 0 rgba(56, 189, 248, .35); }
}

/* Componentes existentes dentro del holograma */
.holo .info-row { border-bottom-color: rgba(148, 163, 184, .12); }
.holo .info-label { font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--holo-mute); }
.holo .info-val { color: var(--holo-ink); }
.holo .op-prob-label { font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; color: var(--holo-mute); letter-spacing: .04em; }

/* Tema claro */
[data-theme="light"] .holo { --holo: #0369a1; --holo-soft: rgba(3, 105, 161, .2); --holo-bg: rgba(252, 253, 254, .98); --holo-ink: #0f172a; --holo-mute: #526071;
  filter: drop-shadow(0 4px 10px rgba(15, 23, 42, .1)); }
[data-theme="light"] .holo:hover { filter: drop-shadow(0 4px 12px rgba(15, 23, 42, .16)); }
[data-theme="light"] .holo-body { background: linear-gradient(rgba(15, 23, 42, .03) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(15, 23, 42, .03) 1px, transparent 1px) 0 0 / 24px 24px, var(--holo-bg); }
[data-theme="light"] .holo-icon { background: #f1f7fb; }
[data-theme="light"] .holo-foot { background: rgba(3, 105, 161, .04); }

@media (prefers-reduced-motion: reduce) { .holo-icon { animation: none !important; } }

/* ── Tema claro macOS (white glass): el chasis HUD pasa a una tarjeta de vidrio redondeada ── */
html[data-theme="light"] .holo { --holo: #007aff; --holo-soft: rgba(60,60,67,.14); --holo-bg: rgba(255,255,255,.66); --holo-ink: #1d1d1f; --holo-mute: #6e6e73;
  filter: drop-shadow(0 14px 26px rgba(30,40,90,.16)); }
html[data-theme="light"] .holo:hover { filter: drop-shadow(0 18px 32px rgba(30,40,90,.22)); }
html[data-theme="light"] .holo-frame { clip-path: none; border-radius: 18px; padding: 1px; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.55)); }
html[data-theme="light"] .holo-body { clip-path: none; border-radius: 17px; background: var(--holo-bg); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); }
html[data-theme="light"] .holo:hover .holo-body { background: rgba(255,255,255,.76); }
html[data-theme="light"] .holo-head, html[data-theme="light"] .holo-foot, html[data-theme="light"] .holo .info-label, html[data-theme="light"] .holo .op-prob-label { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif; letter-spacing: .04em; }
html[data-theme="light"] .holo-title { color: #007aff; text-shadow: none; }
html[data-theme="light"] .holo-icon { border-radius: 12px; border: 1px solid rgba(255,255,255,.9); background: linear-gradient(180deg, #ffffff, #eef3ff); color: #007aff; box-shadow: 0 6px 16px -4px rgba(0,122,255,.35); }
html[data-theme="light"] .holo-foot { background: rgba(0,0,0,.025); }