/* ============================================================================
   ptupi_modus — BANNER + BARRA DE MENÚS de la portada en la galería Piwigo.
   #cardcab copiado 1:1 de la portada (local/css/ptupi_modus-rules.css)
   ============================================================================ */
:root{
  --naranja:#E36C0A; --naranjad:#c95e08; --tierra:#5E5D4B; --gris:#8a8576;
  --tinta:#3f3e36; --crema:#FBF8EC; --linea:#e0ddce; --cardw:min(1180px, calc(100% - 24px));
}
/* MODO ANCHO (boton #cc-wide): banner/footer al 95% (el contenido de la galeria ya es full-width).
   Nunca mas estrecho que lo normal (1180) ni desborda. */
:root.cc-wide{ --cardw: min(calc(100% - 24px), max(1180px, 95vw)); }
#cardcab #cc-wide.is-on{ background:var(--naranja); border-color:var(--naranja); }
#cardcab #cc-wide.is-on svg.ico-line{ stroke:#fff; }

/* Ocultar la cabecera/menú de modus (la sustituye el banner de la portada) */
#menubar{ display:none !important; }
/* modus pone el body en display:flex con altura de viewport, lo que rompe position:sticky.
   Lo pasamos a flujo normal para que el banner se quede fijo al hacer scroll. */
body{ background:#fff !important; display:block !important; height:auto !important; min-height:100vh; }

/* ===== BANNER (cardcab) ===== */
/* Banner FIJO al hacer scroll: sticky con TOP NEGATIVO = el cielo se sale por arriba de
   forma natural y solo queda el menú fijo. NO cambia la altura de la página → SIN vibración. */
#ptupi-cab-holder{ font-family:"Courier New",Courier,monospace; position:sticky; top:-201px; z-index:600; }
@media(max-width:980px){ #ptupi-cab-holder{ top:-151px; } }
#cardcab{
  position:relative; box-sizing:border-box; width:var(--cardw); max-width:var(--cardw);
  margin:14px auto 14px; background:#fff; border:1px solid var(--linea); border-radius:14px;
  box-shadow:0 4px 16px rgba(120,110,80,.16); overflow:visible;
  font-family:"Courier New",Courier,monospace;
}
#cardcab .cc-sky{ position:relative; background:#FBF8EC; height:200px; border-radius:13px 13px 0 0; overflow:hidden; transition:height .28s ease; }
#cardcab .cc-skybg{ position:absolute; inset:0; background-color:#FBF8EC; }
#cardcab .cc-sl{ position:absolute; left:0; right:0; bottom:0; width:100%; display:block; pointer-events:none; }
#cardcab .cc-sl-real{ opacity:1; }
#cardcab .cc-title{ position:absolute; top:30px; left:0; right:0; z-index:7; text-align:center; pointer-events:none; padding:0 12px; }
#cardcab .cc-title-marca{ margin:0; font-weight:bold; font-size:34px; line-height:1.05; color:var(--tierra); letter-spacing:.4px; text-shadow:0 1px 3px rgba(255,255,255,.7); }
#cardcab .cc-title-marca .cc-t-org{ color:var(--naranja); }
#cardcab .cc-title-sub{ margin:2px 0 0; font-size:15px; font-style:italic; color:var(--tierra); text-shadow:0 1px 3px rgba(255,255,255,.7); }
/* Etiqueta de VERSIÓN del tema de la galería (esquina, discreta; distinta de la portada) */
#cardcab .cc-ver{ position:absolute; top:8px; right:10px; z-index:8; font:bold 11px/1 "Courier New",Courier,monospace; color:var(--gris); background:rgba(255,255,255,.7); border:1px solid var(--linea); border-radius:8px; padding:3px 8px; letter-spacing:.3px; pointer-events:none; }
#cardcab.cc-compact .cc-ver{ font-size:10px; top:6px; right:8px; padding:2px 6px; }

#cardcab .cc-menu{ position:relative; display:flex; align-items:center; gap:12px; padding:12px 18px; border-top:1px solid var(--linea); flex-wrap:wrap; }
#cardcab .cc-logo{ flex:0 0 auto; order:1; height:38px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; padding:0 12px; border:2px solid var(--tierra); border-radius:8px; background:#fff; transition:.15s; }
#cardcab .cc-logo img{ height:30px; width:auto; display:block; transition:.15s; }
#cardcab .cc-logo:hover{ background:var(--naranja); border-color:var(--naranja); }
#cardcab .cc-logo:hover img{ filter:brightness(0) invert(1); }
#cardcab .cc-portada{ order:0; }   /* botón "Portada" delante del logo pTupi */
/* DOS LÍNEAS: (1) logo + redes/pantalla · (2) el resto de menús (línea completa debajo) */
#cardcab .cc-nav{ order:3; flex:0 0 100%; display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:8px; padding-top:8px; border-top:1px solid var(--linea); }

.cc-btn, #cardcab .cc-btn{
  height:38px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:"Courier New",Courier,monospace; font-weight:bold; color:var(--tierra); background:#fff;
  font-size:14px; text-decoration:none; padding:0 13px; border-radius:8px; border:2px solid var(--tierra);
  white-space:nowrap; cursor:pointer; transition:.15s;
}
#cardcab svg.ico-line{ width:18px; height:18px; stroke:var(--tierra); stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; transition:.15s; }
#cardcab .cc-btn:hover{ background:var(--naranja); border-color:var(--naranja); color:#fff; }
#cardcab .cc-btn:hover svg.ico-line{ stroke:#fff; }

#cardcab .cc-der{ flex:0 0 auto; order:2; margin-left:auto; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
#cardcab .cc-der a{ position:relative; width:38px; height:38px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; border:2px solid var(--tierra); border-radius:8px; transition:.15s; }
#cardcab .cc-der a svg{ width:20px; height:20px; fill:var(--tierra); transition:.15s; }
#cardcab .cc-der a:hover{ background:var(--naranja); border-color:var(--naranja); }
#cardcab .cc-der a:hover svg{ fill:#fff; }
/* Botones de sesión (Entrar/Perfil/Salir) en la línea 1: botón de texto, no icono */
#cardcab .cc-der a.cc-auth{ width:auto; gap:6px; padding:0 13px; font-family:"Courier New",Courier,monospace; font-weight:bold; font-size:14px; color:var(--tierra); white-space:nowrap; }
#cardcab .cc-der a.cc-auth svg{ width:18px; height:18px; fill:none; stroke:var(--tierra); }
#cardcab .cc-der a.cc-auth:hover{ background:var(--naranja); border-color:var(--naranja); color:#fff; }
#cardcab .cc-der a.cc-auth:hover svg{ fill:none; stroke:#fff; }

/* ===== Desplegable de ÁLBUMES (árbol) ===== */
#cardcab .cc-albdrop{ position:relative; }
#cardcab .cc-albbtn .cc-caret{ font-size:11px; margin-left:1px; }
#cardcab .cc-albpanel{
  position:absolute; top:100%; left:0; margin-top:5px; z-index:800;
  background:#fff; border:2px solid var(--tierra); border-radius:10px;
  box-shadow:0 10px 28px rgba(120,110,80,.28); padding:8px;
  min-width:340px; max-width:440px; max-height:min(72vh,600px); overflow:auto;
  font-family:"Courier New",Courier,monospace;
}
.cc-albtree-loading{ color:var(--gris); padding:8px 6px; font-size:13px; }
.cc-tree{ list-style:none; margin:0; padding:0; }
.cc-tree .cc-tree{ margin-left:16px; border-left:1px solid var(--linea); padding-left:2px; }   /* línea de guía SÓLIDA */
.cc-tr{ display:flex; align-items:center; gap:7px; padding:3px 4px; border-radius:6px; }
.cc-tr:hover{ background:var(--crema); }
.cc-tw{ width:24px; height:24px; flex:0 0 auto; border:0; background:none; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; }
.cc-tw .cc-chev{ width:17px; height:17px; fill:none; stroke:var(--tierra); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s ease; }
.cc-tw.open .cc-chev{ transform:rotate(90deg); }
.cc-tw:hover .cc-chev{ stroke:var(--naranja); }
.cc-tw0{ width:24px; flex:0 0 auto; }
.cc-tl{ flex:1 1 auto; color:var(--tierra) !important; text-decoration:none; font-size:14px; font-weight:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-tl:hover{ color:var(--naranja) !important; text-decoration:none; }
.cc-tc{ flex:0 0 auto; color:#fff; background:var(--gris); border-radius:11px; font-size:11px; font-weight:bold; padding:2px 9px; min-width:26px; text-align:center; }

/* ===== Herramientas: pantalla completa + zoom ===== */
#cardcab .cc-der .cc-tool{ width:38px; height:38px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; border:2px solid var(--tierra); border-radius:8px; background:#fff; cursor:pointer; padding:0; transition:.15s; }
#cardcab .cc-der .cc-tool svg.ico-line{ width:20px; height:20px; stroke:var(--tierra); }
#cardcab .cc-der .cc-tool:hover{ background:var(--naranja); border-color:var(--naranja); }
#cardcab .cc-der .cc-tool:hover svg.ico-line{ stroke:#fff; }
#cardcab .cc-der .cc-tool.cc-tool-txt{ width:auto; padding:0 10px; font:bold 12px/1 "Courier New",Courier,monospace; color:var(--tierra); }
#cardcab .cc-der .cc-tool.cc-tool-txt:hover{ background:var(--naranja); color:#fff; }

/* ===== Hamburguesa + modo compacto (móvil) ===== */
#cardcab #cc-toggle{ display:none; }
#cardcab .cc-burger{ display:none; order:-1; align-items:center; justify-content:center; width:38px; height:38px; box-sizing:border-box; border:2px solid var(--tierra); border-radius:8px; background:#fff; cursor:pointer; transition:.15s; }
#cardcab .cc-burger svg{ width:20px; height:20px; fill:var(--tierra); }
#cardcab .cc-burger:hover{ background:var(--naranja); border-color:var(--naranja); }
#cardcab .cc-burger:hover svg{ fill:#fff; }
#cardcab .cc-burger .cc-bg-close{ display:none; }
#cardcab:has(#cc-toggle:checked) .cc-burger .cc-bg-menu{ display:none; }
#cardcab:has(#cc-toggle:checked) .cc-burger .cc-bg-close{ display:block; }
#cardcab:has(#cc-toggle:checked) .cc-burger{ background:var(--naranja); border-color:var(--naranja); }
#cardcab:has(#cc-toggle:checked) .cc-burger svg{ fill:#fff; }

#cardcab.cc-compact .cc-menu{ flex-wrap:wrap; }
#cardcab.cc-compact .cc-burger{ display:flex; }
#cardcab.cc-compact .cc-logo{ order:0; margin-right:auto; }
#cardcab.cc-compact .cc-nav, #cardcab.cc-compact .cc-der{ display:none; flex-basis:100%; }
#cardcab.cc-compact:has(#cc-toggle:checked) .cc-nav{ order:2; display:flex; flex-direction:column; align-items:stretch; gap:8px; }
#cardcab.cc-compact:has(#cc-toggle:checked) .cc-nav .cc-btn{ width:100%; }
#cardcab.cc-compact:has(#cc-toggle:checked) .cc-der{ order:3; display:flex; justify-content:center; gap:9px; flex-wrap:wrap; }
#cardcab.cc-compact .cc-title-marca{ font-size:24px; }
#cardcab.cc-compact .cc-sky{ height:150px; }

/* ============================================================================
   FOOTER (pie de la portada) — parte del componente pTupi
   ============================================================================ */
#copyright{ display:none !important; }   /* oculta el pie de modus */
#ptupi-footer{
  box-sizing:border-box; width:var(--cardw); max-width:var(--cardw); margin:14px auto 24px;
  color:var(--tierra); border-radius:14px; padding:18px 20px; background:#f5f4f1;
  border:1px solid var(--linea); text-align:center; box-shadow:0 4px 16px rgba(120,110,80,.10);
  font-family:"Courier New",Courier,monospace;
}
#ptupi-footer a{ color:var(--naranja); }
#ptupi-footer .cc-t-org, #ptupi-footer .pie-tupi-txt{ color:var(--naranja); }
#ptupi-footer img{ filter:none; }
#ptupi-footer .pie-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
#ptupi-footer .pie-izq{ flex:0 0 auto; text-align:left; white-space:nowrap; }
#ptupi-footer .pie-der{ flex:0 0 auto; text-align:right; white-space:nowrap; }
#ptupi-footer .pie-centro{ flex:1 1 auto; text-align:center; padding:0 16px; }
#ptupi-footer .pie-izq img, #ptupi-footer .pie-der img{ width:auto; max-width:none; vertical-align:middle; }
#ptupi-footer .pie-clm{ height:84px; margin-right:18px; border-radius:8px; }
#ptupi-footer .pie-rdq{ height:96px; }
#ptupi-footer .pie-ayto{ height:80px; margin-right:18px; }
#ptupi-footer .pie-ptupi{ height:60px; }
#ptupi-footer .pie-centro p{ margin:3px 0; font-size:12px; }
#ptupi-footer .pie-centro .pie-marca{ font-weight:bold; font-size:15px; margin-bottom:6px; }
#ptupi-footer a.pie-ptupi-link{ text-decoration:none; font-weight:bold; color:inherit; }
#ptupi-footer a.pie-ptupi-link:hover{ text-decoration:underline; }
@media(max-width:768px){
  #ptupi-footer .pie-row{ flex-direction:column; }
  #ptupi-footer .pie-izq, #ptupi-footer .pie-centro, #ptupi-footer .pie-der{ text-align:center; white-space:normal; }
  #ptupi-footer .pie-centro{ padding:12px 0; }
  #ptupi-footer .pie-izq img, #ptupi-footer .pie-der img{ margin:10px; }
}

/* ============================================================================
   PAGINAS DE ACCESO (identification / register / password) — tarjeta de marca.
   El JS pone la clase .ptupi-auth en <html> y no monta el banner en estas paginas.
   ============================================================================ */
:root.ptupi-auth, :root.ptupi-auth body{ background:var(--crema) !important; font-family:"Courier New",Courier,monospace; }
:root.ptupi-auth #the_page{ box-sizing:border-box; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px 14px; }
:root.ptupi-auth #mode{ display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; background:transparent !important; background-image:none !important; box-shadow:none !important; }
/* ocultar la cabecera propia de standard_pages (Ayuda + luna + titulo Piwigo): la marca ya va en la tarjeta */
:root.ptupi-auth #header-options, :root.ptupi-auth #logo-section{ display:none !important; }
/* la tarjeta (login-form u homologos de register/password), NO las secciones de cabecera */
:root.ptupi-auth #mode > section:not(#header-options):not(#logo-section),
:root.ptupi-auth #login-form{
  width:min(440px,100%); max-width:440px; margin:0; box-sizing:border-box; background:#fff;
  border:1px solid var(--linea); border-radius:16px; padding:24px 26px 20px;
  box-shadow:0 12px 34px rgba(120,110,80,.18); text-align:left;
}
/* enlace "Volver a la galeria" */
:root.ptupi-auth #return-to-gallery{ color:var(--naranja); font-weight:bold; text-decoration:none; font-size:14px; }
:root.ptupi-auth #return-to-gallery:hover{ text-decoration:underline; }
:root.ptupi-auth .ptupi-auth-logo{ display:flex; justify-content:center; margin:2px 0 14px; }
:root.ptupi-auth .ptupi-auth-logo img{ height:44px; width:auto; display:block; }
:root.ptupi-auth h1{ font-family:"Courier New",Courier,monospace; color:var(--tierra); text-align:center; font-size:21px; margin:0 0 16px; letter-spacing:.3px; }
:root.ptupi-auth label{ color:var(--tierra); font-weight:bold; font-size:13px; }
:root.ptupi-auth .column-flex{ display:flex; flex-direction:column; gap:5px; margin-bottom:13px; }
:root.ptupi-auth .input-container{ display:flex; align-items:center; gap:8px; border:2px solid var(--linea); border-radius:8px; background:#fff; padding:0 10px; }
:root.ptupi-auth .input-container:focus-within{ border-color:var(--naranja); }
:root.ptupi-auth .input-container input{ flex:1 1 auto; border:0 !important; outline:none !important; background:transparent !important; box-shadow:none !important; font-family:"Courier New",Courier,monospace; font-size:15px; color:var(--tinta); padding:9px 0; }
:root.ptupi-auth .input-container i{ color:var(--gris); font-style:normal; flex:0 0 auto; }
:root.ptupi-auth .input-container i.togglePassword{ cursor:pointer; }
:root.ptupi-auth .remember-me-container label{ display:inline-flex; align-items:center; gap:7px; font-weight:normal; color:var(--tierra); cursor:pointer; }
:root.ptupi-auth .btn-main,
:root.ptupi-auth input[type="submit"],
:root.ptupi-auth button[type="submit"]{
  width:100%; box-sizing:border-box; font-family:"Courier New",Courier,monospace; font-weight:bold; font-size:15px; cursor:pointer;
  background:var(--naranja) !important; background-image:none !important; color:#fff !important; border:2px solid var(--naranja) !important; border-radius:8px; padding:11px 16px; margin-top:4px; transition:.15s;
}
:root.ptupi-auth .btn-main:hover,
:root.ptupi-auth input[type="submit"]:hover,
:root.ptupi-auth button[type="submit"]:hover{ background:var(--naranjad) !important; border-color:var(--naranjad) !important; }
:root.ptupi-auth .error-message{ color:var(--naranjad); font-size:12px; }
:root.ptupi-auth .secondary-links{ text-align:center; margin-top:16px; font-size:13px; color:var(--tierra); }
:root.ptupi-auth .secondary-links a{ color:var(--naranja); text-decoration:none; font-weight:bold; }
:root.ptupi-auth .secondary-links a:hover{ text-decoration:underline; }
:root.ptupi-auth #separator{ display:block; height:1px; background:var(--linea); margin:12px 0; }
/* ocultar el logo Piwigo por defecto de standard_pages */
:root.ptupi-auth img[src*="piwigo_logo"], :root.ptupi-auth .themeconf-logo{ display:none !important; }