/* ==============================
       RESET BÁSICO
    ============================== */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    
    /* ==============================
       BODY / FONDO FIJO
    ============================== */
    body {
      zoom:0.8;
      margin: 80px 340px 0 340px;
      background-image: url('img/DRAGON6.GIF');
      
      background-attachment: fixed;
      background-size: cover;
      background-position: right center;
      background-repeat: no-repeat;
      font-family: 'Courier New', Courier, monospace;
      font-size: 12px;
      min-width: 700px;
     
    }


    /* ==============================
       MODO NOCHE (por defecto)
    ============================== */
    body.noche {
      color: #FF44FF;
      background-image: url('img/fondo.gif');
      background-attachment: fixed;
      background-size: auto;
      background-position: top left;
      background-repeat: repeat;
      font-weight: 700;
    }
    body.noche a             { color: #00ff4c; text-decoration: underline; }
    body.noche a:visited     { color: #AA22AA; }
    body.noche a:hover       { color: #FFFF00; text-decoration: none; }

    /* --- Sidebar izquierdo --- */
    body.noche .menu-col     { background: transparent; }
    body.noche .blog-logo    { color: #FF44FF; text-shadow: 0 0 8px #FF44FF, 0 0 20px #00FFFF; border-bottom: 2px dashed #00BB00; background: rgba(0,0,40,0.92); }
    body.noche .blog-tagline { color: #00CCCC; background: rgba(0,0,40,0.92); }
    body.noche .logo-gif-wrap { background: rgba(0,0,40,0.92); display: block; }

    body.noche .nav-link {
      color: #00FFFF;
      border-bottom: 1px dashed #003300;
      background: rgba(0,0,60,0.60);
      padding-left: 25px;
    }
    body.noche .nav-link:hover,
    body.noche .nav-link.activo { background: rgba(0,0,100,0.90); color: #FFFF00; }
body.noche .nav-link:visited { color: #FF8800; }
    body.noche .widget-titulo { background: rgba(0,0,120,0.90); color: #FFFF00; border-bottom: 1px dashed #00BB00; border-top: 2px dashed #00BB00; }
    body.noche .widget-cuerpo { background: rgba(0,0,60,0.80); color: #00FF00; border-bottom: 2px dashed #00BB00; }
    body.noche .widget-cuerpo a { color: #00ff4c; }
    body.noche .counter-num  { color: #00FF00; text-shadow: 0 0 5px #00FF00; }

    /* --- Contenido derecho --- */
    body.noche .content-col  { background: transparent; }
   body.noche .contenido-principal {
    background: rgba(0,0,20,0.85);
    border: 2px solid #00CCFF;
    box-shadow: 0 0 10px #00CCFF, 0 0 28px #FF00FF, 0 0 55px rgba(0,80,255,0.25);
}}
     body.noche .contenido-2 { background: rgba(0,0,20,0.85); border-style: solid; border-width: 12px; border-image-source: url(img/2600.png); border-image-slice: 300; border-image-repeat: round; border-image-outset: 20px; }
    body.noche .titulo-blog  { background: linear-gradient(to right, #FFFFFF, #00CCFF, #FFFF00, #FFFFFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; font-family: Garamond, serif; }
    body.noche .titulo-blog a { text-decoration: none; }
    .letra-titulo { display: inline-block; }
    .letra-titulo:hover {
      background-image: url('img/ruido.gif');
      background-size: cover;
      background-position: center;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }
    body.noche .post-wrap    { border: 1px dashed #005500; background: rgba(0,0,40,0.70); }
    body.noche .album-wrap   { border: 1px dashed #005500; background: rgba(0,0,40,0.70); }
    body.noche .seccion-badge { color: #FF44FF; background: rgba(60,0,60,0.7); border-color: #880088; }
    body.noche .post-titulo  { color: #FFFF00; }
    body.noche .post-fecha   { color: #888888; }
    body.noche .bajo-construccion { color: #FF8800; }

    body.noche .gb-tabla     { border: 2px dashed #00AA00 !important; }
    body.noche .gb-tabla th  { background: rgba(0,0,100,0.90); color: #FFFF00; }
    body.noche .gb-tabla td  { border-color: #003300 !important; }
    body.noche input[type="text"],
    body.noche textarea {
      background: #001122; color: #00FF00;
      border: 1px solid #006600; outline: none;
      font-family: "Verdana", sans-serif; font-size: 11px;
    }
    body.noche input[type="submit"],
    body.noche .btn-toggle {
      background: #000066; color: #00FF00;
      border: 1px solid #00FF00; cursor: pointer;
      font-family: "Comic Sans MS", "Verdana", sans-serif; font-size: 11px;
      padding: 2px 8px;
    }
    body.noche input[type="submit"]:hover,
    body.noche .btn-toggle:hover { background: #000099; color: #FFFF00; }

    /* --- Marquee / Footer --- */
    body.noche .marquee-bar  { background: transparent; color: #00FF00; border-bottom: 1px solid #00AA00; }
    body.noche .footer-bar   { background: rgba(0,0,40,0.90); color: #00BB00; border-top: 2px dashed #00AA00; }
    body.noche .footer-bar a { color: #FF44FF; }

    /* --- Zoom --- */
    body.noche .zoom-btn     { background: #000066; color: #00FF00; border-color: #00FF00; }
    body.noche .zoom-btn:hover { background: #000099; color: #FFFF00; }
    body.noche .zoom-lbl     { color: #00CCCC; }

    /* ==============================
       MODO LUZ
    ============================== */
    body.luz {
      color: #000033;
      
    }
    body.luz a             { color: #0000CC; text-decoration: underline; }
    body.luz a:visited     { color: #660099; }
    body.luz a:hover       { color: #CC0000; text-decoration: none; }

    body.luz .menu-col     { background-color: transparent; }
    body.luz .blog-logo    { color: #000099; border-bottom: 2px dashed #0000AA; }
    body.luz .blog-tagline { color: #333399; background: rgba(210,225,255,0.93); }
    body.luz .logo-gif-wrap { background: rgba(210,225,255,0.93); display: block; }

    body.luz .nav-link {
      color: #000099;
      border-bottom: 1px dashed #AABBDD;
      background: rgba(230,238,255,0.70);
      padding-left: 25px;
      
    }
    body.luz .nav-link:hover { background: rgba(212, 192, 6, 0.85); color: #FFFFFF; }
    body.luz .nav-link.activo { background: rgba(0, 150, 7, 0.85); color: #FFFFFF; }

    body.luz .widget-titulo { background: rgba(0,0,150,0.85); color: #FFFFFF; border-bottom: 1px dashed #0000AA; border-top: 2px dashed #0000AA; }
    body.luz .widget-cuerpo2 { background:  rgba(230,238,255,0.90); color: #000033;}
    body.luz .widget-cuerpo { background: rgba(230,238,255,0.90); color: #000033; border-image: linear-gradient(to right bottom, rgb(184, 39, 252) 0%, rgb(44, 144, 252) 25%, rgb(184, 253, 51) 50%, rgb(254, 200, 55) 75%, rgb(253, 24, 146) 100%) 1 / 1 / 0 stretch; border-bottom: 9px dashed #0000AA; }
    body.luz .widget-cuerpo a { color: #0000CC; }
    body.luz .counter-num  { color: #000099; font-weight: bold; }

    body.luz .content-col  { background:transparent; }
    body.luz .contenido-principal { background: rgba(230,238,255,0.90); border: solid 12px; border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%) 1; margin: 0 17px 0 6px; padding: 10px 10px 10px 10px;}
     body.luz .contenido-2 { background: rgba(230,238,255,0.90); border: solid 12px; border-image: linear-gradient(to bottom right, #fc8e27 0%, #fc672c 25%, #f0fd33 50%, #fec837 75%, #f3fad2 100%) 1; margin: 0 17px 0 6px; padding: 10px 10px 10px 10px;}

    body.luz .titulo-blog  { background-color:transparent; color: #ffffff; text-shadow: 0 0 25px #000099; font-family: Garamond, serif; }
    body.luz .subtitulo-blog {
      background: #EEF2FF;
      display: inline-block;
      padding: 2px 12px;
    }
    body.luz .titulo-pag  { background: rgb(249, 253, 255); color: #000099; text-shadow: 0 0 5px #000099; }
    body.luz .subtitulo-pag {
      background: #EEF2FF;
      display: inline-block;
      padding: 2px 12px;
    }
    body.luz .post-wrap    {
      border: 2px solid #AABBDD;
      
      
    }
    body.luz .album-wrap   { border: 2px solid #AABBDD;  }
    body.luz .seccion-badge { color: #990099; background: rgba(240,220,240,0.7); border-color: #CC88CC; }
    body.luz .post-titulo  { color: #000099; background: #F0F4FF; }
    body.luz .post-fecha   { color: #555555; background: #F0F4FF;}
    body.luz .pagina-seccion > p,
    body.luz .pagina-seccion > h2 {
      background: #EEF2FF;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
      padding: 2px 8px;
      display: inline;
    }
    body.luz .bajo-construccion {
      color: #CC4400;
      background: #F0F4FF;
      display: inline-block;
      width: 100%;
    }

    body.luz .gb-tabla     { border: 2px dashed #0000AA !important; }
    body.luz .gb-tabla th  { background: rgba(0,0,150,0.85); color: #FFFFFF;}
    body.luz .gb-tabla td  { border-color: #AABBDD !important; }
    body.luz input[type="text"],
    body.luz textarea {
      background: #FFFFFF; color: #000033;
      border: 1px solid #0000AA; outline: none;
      font-family: "Verdana", sans-serif; font-size: 11px;
    }
    body.luz input[type="submit"],
    body.luz .btn-toggle {
      background: #0000BB; color: #FFFFFF;
      border: 1px solid #000066; cursor: pointer;
      font-family: "Comic Sans MS", "Verdana", sans-serif; font-size: 11px;
      padding: 2px 8px;
    }
    body.luz input[type="submit"]:hover,
    body.luz .btn-toggle:hover { background: #0000EE; }

    body.luz .marquee-bar  { background: rgba(210,225,255,0.92); color: #000066; border-bottom: 1px solid #0000AA; }
    body.luz .footer-bar   { background: rgba(210,225,255,0.95); color: #000066; border-top: 2px dashed #0000AA; }
    body.luz .footer-bar a { color: #0000CC; }

    body.luz .zoom-btn     { background: #0000BB; color: #FFFFFF; border-color: #000066; }
    body.luz .zoom-btn:hover { background: #0000EE; }
    body.luz .zoom-lbl     { color: #000099; }

    /* ==============================
       BOTÓN MODO (icono fijo)
    ============================== */
    .btn-modo-wrap {
      display: inline-block;
      text-align: center;
      vertical-align: middle;
    }
    .btn-modo-icono {
      width: 96px;
      height: auto;
      cursor: pointer;
      vertical-align: middle;
      opacity: 0.85;
      transition: opacity 0.2s;
    }
    .btn-modo-icono[src*="lua"] {
      width: 48px;
      height: auto;
      margin-top: 0;
      margin-bottom: 0;
    }
    .btn-modo-icono:hover {
      opacity: 1;
    }

    /* Icono de modo: mostrar luna en luz, sol en noche */
    body.luz   .icon-to-noche { display: inline-block; }
    body.luz   .icon-to-luz   { display: none; }
    body.noche .icon-to-noche { display: none; }
    body.noche .icon-to-luz   { display: inline-block; }

    /* Badge "new": new.gif en luz, 0.gif en noche */
    body.luz   .new-badge-noche { display: none; }
    body.luz   .new-badge-luz   { display: inline; }
    body.noche .new-badge-luz   { display: none; }
    body.noche .new-badge-noche { display: inline; }

    /* ==============================
       ZOOM BAR (top, full-width)
    ============================== */
    .zoom-bar {
      padding: 14px 10px;
      text-align: right;
      font-size: 12px;
      white-space: nowrap;
      
      position: fixed;
      top: 10px;
      left: -30px;
      width: 100%;  
    }
    .zoom-slider { accent-color: #FF00FF; }           /* un color para todos los modos */
body.noche .zoom-slider { accent-color: #00FF00; } /* verde en noche */
body.luz   .zoom-slider { accent-color: #0000BB; } /* azul en luz */
    body.noche .zoom-bar { background: transparent; border-bottom: 0px solid #005500; }
    body.luz   .zoom-bar { background: transparent; border-bottom: 0px solid #0000AA; }

    /* ==============================
       MARQUEE
    ============================== */
    .marquee-bar {
      padding: 3px 0;
      font-size: 1.05em;
      overflow: hidden;
      width: 100%;
    }

    /* ==============================
       LAYOUT PRINCIPAL (tabla 2 cols)
    ============================== */
    #layout-tabla {
      width: 100%;
      border-collapse: collapse;
       border-style: dotted;
       
    }

    .menu-col {
      width: 300px;
      min-width: 300px;
      vertical-align: top;
      padding: 20px;
       
      }

    .content-col {
      vertical-align: top;
      padding: 0;
      
    
    }

    /* ==============================
       COLUMNA MENÚ IZQUIERDA
    ============================== */

    .blog-logo {
      font-family: "Garamond", cursive;
      font-size: 1.5em;
      font-weight: bold;
      letter-spacing: 2px;
      text-align: center;
      padding: 16px 10px 10px 10px;
    }
    .blog-tagline {
      font-size: 0.6em;
      letter-spacing: 2px;
      text-align: center;
      padding: 0 8px 10px 8px;
      vertical-align: middle;
    }

    .logo-gif {
      display: block;
      margin: 0 auto 8px auto;
    }

    .menu-sep {
      height: 1px;
      border: none;
      border-top: 1px dashed currentColor;
      margin: 4px 8px;
      opacity: 0.4;
    }

    .nav-link {
      display: block;
      padding: 8px 14px;
      font-size: 0.92em;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 2px;
      text-decoration: none;
      cursor: pointer;
      transition: none;
    }
    .nav-link:before {
      content: "\25BA \A0";
    }

    .menu-controls {
      padding: 8px 10px;
      text-align: center;
      display: inline-block;
    }
    .btn-toggle {
      font-size: 10px;
      display: block;
      width: 100%;
      margin-bottom: 8px;
      padding: 4px 0;
      cursor: pointer;
    }
    .zoom-row {
      display: block;
      text-align: center;
      white-space: nowrap;
    }
    .zoom-lbl {
      font-size: 0.77em;
      letter-spacing: 1px;
      vertical-align: middle;
    }
    .zoom-btn {
      font-size: 1em;
      width: 22px;
      height: 20px;
      cursor: pointer;
      vertical-align: middle;
      padding: 0;
      border: 1px solid;
    }
    .zoom-slider {
      width: 90px;
      vertical-align: middle;
      margin: 0 4px;
      cursor: pointer;
      accent-color: currentColor;
    }

    .widget-titulo {
      font-size: 0.85em;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 5px 10px;
      
    }
    .widget-cuerpo, .widget-cuerpo2 {
      font-size: 0.92em;
      padding: 6px 10px 8px 10px;
    }
    .widget-cuerpo a, .widget-cuerpo2 a {
      display: block;
      padding: 2px 0;
      text-decoration: none;
    }
    .widget-cuerpo a:hover, .widget-cuerpo2 a:hover {
      text-decoration: underline;
    }
    .widget-cuerpo small, .widget-cuerpo2 small {
      display: block;
      padding-left: 8px;
      font-size: 0.83em;
      margin-top: -2px;
      opacity: 0.7;
    }
    .widget-hr {
      border: none;
      border-top: 1px dashed currentColor;
      margin: 4px 0;
      opacity: 0.3;
    }

    .counter-num {
      font-family: "Courier New", monospace;
      font-size: 1.7em;
      letter-spacing: 4px;
      display: block;
      text-align: center;
      padding: 4px 0;
    }

    /* ==============================
       CONTENIDO DERECHO
    ============================== */
    .content-col {
      min-height: 100vh;
      padding: 0 0 20px 0;
      
    }

    .titulo-blog {
      text-align: center;
      font-size: 76px;
      font-weight: bold;
      font-family: "Garamond", cursive;
      letter-spacing: 3px;
      padding: 18px 0 6px 0;
    }

    .subtitulo-blog {
      text-align: center;
      font-size: 0.77em;
      letter-spacing: 2px;
      margin-bottom: 12px;
    }

    .div-separator {
      text-align: center;
      margin: 6px 0;
    }

    /* ==============================
       SECCIONES (SPA)
    ============================== */
    .pagina-seccion {
      display: none;
      padding: 12px 22px;
       
    }
    .pagina-seccion.activa {
      display: block;
    }

    /* ==============================
       POSTS
    ============================== */
    .post-wrap {
      padding: 10px 14px;
      margin-bottom: 14px;
      
    }
    .post-titulo {
      font-size: 1em;
      font-weight: bold;
      margin-bottom: 4px;
    }
    .post-fecha {
      font-size: 0.81em;
      margin-bottom: 8px;
    }
    .post-wrap p {
      margin: 6px 0;
      line-height: 1.6;
      
    }

    /* ==============================
       ÁLBUMES (GRID)
    ============================== */
    .album-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      margin-bottom: 16px;
    }
    .album-wrap {
      overflow: hidden;
    }
    .album-portada {
      width: 100%;
      height: 150px;
      object-fit: cover;
      display: block;
    }
    .album-portada-placeholder {
      width: 100%;
      height: 80px;
      display: block;
    }
    body.noche .album-portada-placeholder { background: rgba(0,0,60,0.60); }
    body.luz   .album-portada-placeholder { background: rgba(200,210,240,0.60); }
    .album-wrap-info {
      padding: 8px 10px;
    }
    .seccion-badge {
      display: inline-block;
      margin: 0 3px 0 0;
      padding: 0px 5px;
      font-size: 0.76em;
      border: 1px solid;
    }
    .archivo-ul { list-style: none; padding: 0 0 4px 10px; margin: 0; }
    .archivo-ul li { line-height: 1.8; }
    body.noche #archivo-lista details summary { color: #00CCCC; cursor: pointer; list-style: none; }
    body.noche .archivo-ul li a { color: #00ff4c; font-size: 0.85em; }
    body.luz #archivo-lista details summary { color: #000066; cursor: pointer; list-style: none; }
    body.luz .archivo-ul li a { color: #0000CC; font-size: 0.85em; }

    /* ==============================
       GUESTBOOK
    ============================== */
    .gb-form-tabla {
      margin: 0 auto 14px auto;
    }
    .gb-tabla {
      margin: 0 auto;
      width: 92%;
      border-collapse: collapse;
      font-size: 0.85em;
    }
    .gb-tabla th {
      padding: 5px;
      text-align: center;
      font-size: 0.77em;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    .gb-tabla td {
      padding: 5px 8px;
      vertical-align: top;
      border-top: 1px dashed;
    }

    /* ==============================
       DECORACIÓN / MISC
    ============================== */
    .blink {
      animation: parpadeo 1s step-end infinite;
    }
    @keyframes parpadeo {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0; }
    }
    .bajo-construccion {
      text-align: center;
      padding: 30px 10px;
      font-size: 1em;
      font-weight: bold;
    }
    .hr-deco {
      border: none;
      border-top: 1px solid #005500; dashed currentColor;
      margin: 8px 0;
      opacity: 0.5;
    }

  
    .btn88 {
      display: inline-block;
      margin: 2px;
      border: 1px solid #666;
    }

    /* ==============================
       FOOTER
    ============================== */
    .footer-bar {
      text-align: center;
      font-size: 0.77em;
      padding: 8px;
    }

    /* ==============================
       FILTROS HOME
    ============================== */
    .filtros-bar {
      margin-bottom: 12px;
      padding: 8px 10px;
    }
    .filtros-titulo {
      font-size: 0.78em;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 5px;
    }
    .filtros-input {
      width: 100%;
      padding: 3px 5px;
      font-size: 0.85em;
      box-sizing: border-box;
    }
    .filtro-tag {
      display: inline-block;
      margin: 2px 1px;
      padding: 1px 5px;
      cursor: pointer;
      text-decoration: none;
      font-size: 0.91em;
      border: 1px solid;
    }
    .filtro-cat {
      display: block;
      padding: 1px 0;
      text-decoration: none;
      font-size: 0.83em;
      cursor: pointer;
    }
    .filtro-orden {
      width: 100%;
      padding: 2px 3px;
      font-size: 0.83em;
      margin-bottom: 5px;
      box-sizing: border-box;
    }
    .filtro-limpiar {
      display: block;
      width: 100%;
      padding: 3px 0;
      cursor: pointer;
      font-size: 0.78em;
      font-family: "Comic Sans MS", "Verdana", sans-serif;
      margin-top: 4px;
      border: 1px solid;
    }

    body.noche .filtros-bar    { background: rgba(0,0,50,0.80); border: 1px dashed #005500; }
    body.noche .filtros-titulo { color: #FF44FF; }
    body.noche .filtros-input,
    body.noche .filtro-orden   { background: #001122; color: #00FF00; border: 1px solid #006600; outline: none; font-family: "Verdana", sans-serif; }
    body.noche .filtro-tag     { color: #00CCCC; background: rgba(0,0,40,0.70); border-color: #004400; }
    body.noche .filtro-tag:hover,
    body.noche .filtro-tag.filtro-activo { background: rgba(0,0,100,0.90); color: #FFFF00; border-color: #00FF00; }
    body.noche .filtro-cat     { color: #FF44FF; }
    body.noche .filtro-cat:hover,
    body.noche .filtro-cat.filtro-activo { color: #FFFF00; font-weight: bold; }
    body.noche .filtro-limpiar { background: #000066; color: #00FF00; border-color: #00FF00; }
    body.noche .filtro-limpiar:hover { background: #000099; color: #FFFF00; }

    body.luz .filtros-bar    { background:transparent; border: 1px solid #AABBDD; }
    body.luz .filtros-titulo { color: #000099; }
    body.luz .filtros-input,
    body.luz .filtro-orden   { background: #FFFFFF; color: #000033; border: 1px solid #0000AA; outline: none; font-family: "Verdana", sans-serif; }
    body.luz .filtro-tag     { color: #000099; background: rgba(210,225,255,0.70); border-color: #AABBDD; }
    body.luz .filtro-tag:hover,
    body.luz .filtro-tag.filtro-activo { background: rgba(0,0,150,0.85); color: #FFFFFF; border-color: #0000AA; }
    body.luz .filtro-cat     { color: #0000CC; }
    body.luz .filtro-cat:hover,
    body.luz .filtro-cat.filtro-activo { color: #CC0000; font-weight: bold; }
    body.luz .filtro-limpiar { background: #0000BB; color: #FFFFFF; border-color: #000066; }
    body.luz .filtro-limpiar:hover { background: #0000EE; }

    /* ==============================
       MODAL FLOTANTE
    ============================== */
    .modal-flotante {
      position: fixed;
      width: 620px;
      max-width: calc(100vw - 40px);
      max-height: 82vh;
      overflow-y: auto;
      overflow-x: hidden;
      font-family: 'Courier New', Courier, monospace;
      scrollbar-width: thin;
     
  
    }
    .modal-header {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 5px 12px;
      cursor: grab;
      user-select: none;
      position: sticky;
      top: 0;
      z-index: 1;
    }
    .modal-header:active { cursor: grabbing; }
    .modal-titulo-bar {
      font-size: 0.82em;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      flex: 1;
      margin-right: 10px;
    }
    .modal-cerrar-btn {
      flex-shrink: 0;
      cursor: pointer;
      padding: 2px 8px;
      font-family: "Comic Sans MS", "Verdana", sans-serif;
      font-size: 0.82em;
      border: 1px solid;
      background: transparent;
    }
    .modal-cuerpo { padding: 16px 20px 20px; font-size: 0.85em; overflow-x: hidden; }
    .modal-cuerpo h2 { font-size: 1.4em; margin-bottom: 6px; }
    .modal-cuerpo p  { margin: 8px 0; line-height: 1.6; }
    .modal-cuerpo img, .modal-cuerpo iframe { max-width: 100%; }
    .modo-modal p { font-size: 0.75em; }

    /* Imágenes y vídeos protegidos */
    .img-protegida {
      transition: opacity 0.4s ease;
      user-select: none;
      -webkit-user-drag: none;
      -webkit-user-select: none;
    }
    .video-wrap { margin: 10px 0; text-align: center; }
    .video-wrap video { max-width: 100%; display: block; margin: 0 auto; }

    body.noche .modal-flotante {
      background: rgba(0,0,30,0.97);
      color: #FF44FF;
     
      
    }
    body.noche .modal-header        { background: rgba(0,0,80,0.92); border-bottom: 1px dashed #00BB00; }
    body.noche .modal-titulo-bar    { color: #00FFFF; }
    body.noche .modal-cerrar-btn    { color: #00FF00; border-color: #00FF00; background: #000066; }
    body.noche .modal-cerrar-btn:hover { background: #000099; color: #FFFF00; }
    body.noche .modal-cuerpo h2     { color: #FFFF00; }

    body.luz .modal-flotante {
      background: rgba(230,238,255,0.99);
      color: #000033;
      border: 2px solid #0000AA;
      box-shadow: 4px 4px 0 #7788CC, -1px -1px 0 #AABBDD, 0 0 24px rgba(0,0,180,0.12);
    }
    body.luz .modal-header        { background: rgba(180,200,240,0.92); border-bottom: 1px solid #AABBDD; }
    body.luz .modal-titulo-bar    { color: #000066; }
    body.luz .modal-cerrar-btn    { color: #FFFFFF; border-color: #000066; background: #0000BB; }
    body.luz .modal-cerrar-btn:hover { background: #0000EE; }
    body.luz .modal-cuerpo h2     { color: #000099; }