/* Colores corporativos Megasur, medidos por píxeles en capturas de megasur.es (portada, ficha y login). */
:root {
  --nav: #0a1b5a;        /* barra de navegación */
  --logo: #00206f;       /* azul del logotipo */
  --navy: #101962;
  --blue: #0d498b;       /* títulos, enlaces, iconos */
  --blue-dark: #1c3a64;
  --breadcrumb: #3c6189;
  --accent: #febd69;     /* botón de buscar */
  --orange: #f2990c;     /* llamadas a la acción / avisos */
  --green: #00b951;
  --red: #e4211f;
  --side-bg: #f0f0f6;
  --text: #4c4c4c;
  --muted: #888;
  --border: #d9dbe5;
  --field-bg: #f2f2f2;
  --field-border: #d2d5e0;
}

* { box-sizing: border-box; }
body { font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; margin: 0; color: var(--text); background: #fff; font-size: 14px; }
a { color: var(--blue); }
h1, h2, h3 { color: var(--blue); }
h1 { text-transform: uppercase; font-size: 1.35rem; line-height: 1.35; }
h2 { text-transform: uppercase; font-size: 1.05rem; padding-bottom: .4rem; border-bottom: 1px solid var(--blue); }
h3 { font-size: 1rem; }

/* Cabecera y búsqueda */
header.topbar { display: grid; grid-template-columns: 1fr minmax(0, 720px) 1fr; gap: 1.5rem; align-items: center; padding: .7rem 1rem; background: var(--nav); }
.logo { justify-self: start; }
.logo img { display: block; height: 28px; width: auto; }
header.topbar .search { grid-column: 2; width: 100%; --h: 42px; }
header.topbar .enter, header.topbar .logout { grid-column: 3; justify-self: end; margin: 0; }
/* Enlaces de la barra al estilo Megasur: texto blanco grande, icono y separadores verticales. */
header.topbar .enter, header.topbar .logout button, .home .logout button { display: flex; align-items: center; gap: 8px; padding: .55rem 1.1rem; background: none; border: 0; border-left: 1px solid rgba(255, 255, 255, .3); border-right: 1px solid rgba(255, 255, 255, .3); color: #fff; font: inherit; font-size: 16px; font-weight: 400; text-decoration: none; cursor: pointer; }
header.topbar .enter:hover, header.topbar .logout button:hover, .home .logout button:hover { background: rgba(255, 255, 255, .12); }
header.topbar svg, .home .logout svg { width: 20px; height: 20px; fill: #fff; flex: none; }
@media (max-width: 700px) { header.topbar { grid-template-columns: 1fr auto; } header.topbar .search { grid-column: 1 / -1; grid-row: 2; } header.topbar .enter, header.topbar .logout { grid-column: 2; grid-row: 1; } }
button, .btn { padding: .55rem 1.2rem; border: 1px solid #11223b; border-radius: 0; background: linear-gradient(#0d4889, #1c3a64); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
button.link { background: none; border: 0; color: #fff; padding: 0; text-decoration: underline; font-weight: 400; }

/* Contenido */
main { max-width: 960px; margin: 1rem auto; padding: 0 1rem; }
.card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; }
.msg { background: var(--side-bg); border-left: 4px solid var(--orange); padding: .5rem 1rem; margin-bottom: 1rem; }
.error { color: var(--red); }
.badge { background: var(--orange); color: #fff; padding: .1rem .5rem; font-size: .8rem; font-weight: 600; }
.breadcrumb { display: inline-flex; flex-wrap: wrap; border-radius: 8px; overflow: hidden; background: var(--breadcrumb); color: #fff; margin-bottom: 1rem; font-size: 13px; }
.breadcrumb span { padding: .35rem .8rem; }
.breadcrumb span + span::before { content: '\203A'; margin-right: .8rem; opacity: .7; }
.ref { color: #9e9e9e; margin: 0; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.gallery .main img { width: 100%; height: auto; object-fit: contain; }
.thumbs { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.thumbs img { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--border); background: #fff; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid #eee; vertical-align: top; }
th { width: 35%; font-weight: 600; background: var(--side-bg); }
.results { list-style: none; padding: 0; margin: 0; }
.results li { display: flex; gap: 1rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid #eee; }
.results img { width: 64px; height: 64px; object-fit: contain; }
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr; } }

/* Login: panel de cristal sobre el degradado corporativo, campos al estilo del buscador. */
.login { width: min(420px, calc(100% - 2rem)); margin: 0 auto; padding: 2rem 2rem 1.75rem; border: 1px solid rgba(255, 255, 255, .25); border-radius: 20px; background: rgba(255, 255, 255, .1); backdrop-filter: blur(8px); box-shadow: 0 20px 50px rgba(5, 10, 40, .35); }
.login h1 { margin: 0 0 20px; color: #fff; font-size: 1.4rem; text-transform: none; text-align: center; }
.login-intro { margin: 0 0 1.5rem; text-align: center; color: rgba(255, 255, 255, .75); font-size: 14px; line-height: 1.5; }
.login-field { position: relative; margin-bottom: 1rem; }
.login-field > svg { position: absolute; left: 16px; top: 15px; width: 20px; height: 20px; fill: rgba(255, 255, 255, .65); pointer-events: none; }
.login-field input { width: 100%; height: 50px; padding: 0 48px 0 46px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 14px; background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: 16px; }
.login-field input::placeholder { color: rgba(255, 255, 255, .6); }
.login-field input:focus { outline: 2px solid var(--accent); outline-offset: 2px; background: rgba(255, 255, 255, .18); }
.login-field input:-webkit-autofill { -webkit-text-fill-color: #fff; transition: background-color 99999s; }
.login-field .toggle { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: none; }
.login-field .toggle:hover { background: rgba(255, 255, 255, .15); }
.login-field .toggle svg { width: 20px; height: 20px; fill: rgba(255, 255, 255, .8); }
.login-submit { width: 100%; height: 50px; margin-top: .5rem; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 14px; background: var(--accent); color: var(--nav); font-size: 16px; font-weight: 700; }
.login-submit:hover { filter: brightness(1.06); }
.login-submit svg { width: 18px; height: 18px; fill: var(--nav); }
.login .error { margin: 0 0 1rem; padding: .6rem .9rem; border-radius: 10px; background: rgba(228, 33, 31, .22); border: 1px solid rgba(255, 140, 140, .5); color: #fff; font-size: 14px; }
.login-note { margin: 1.25rem 0 0; color: rgba(255, 255, 255, .65); font-size: 13px; text-align: center; }
.login-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; padding: 2rem 0; }
.login-logo { display: block; height: 44px; width: auto; max-width: 80vw; margin: 0; }
.brand { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.tagline { margin: 0; color: rgba(255, 255, 255, .85); font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* Portada: logo y buscador centrados sobre degradado corporativo (sin barra superior). */
body.home, body.gradient { min-height: 100vh; background: radial-gradient(ellipse at 10% 0%, rgba(13, 73, 139, .9), transparent 60%), linear-gradient(135deg, #0d498b 0%, #14307a 35%, #0a1b5a 100%); background-attachment: fixed; color: #fff; }
.home .logout { position: absolute; top: 1rem; right: 1rem; margin: 0; }
.home-main { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 1rem 8vh; gap: 2rem; }
.home-logo img { display: block; height: 48px; width: auto; max-width: 80vw; }
/* Buscador compartido por la portada (--h: 56px) y la topbar (--h: 42px). */
.searchbox { --h: 56px; position: relative; width: min(680px, 100%); }
.searchbox input { width: 100%; height: var(--h); padding: 0 calc(var(--h) + 8px) 0 20px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 16px; background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: 17px; backdrop-filter: blur(6px); }
.searchbox input::placeholder { color: rgba(255, 255, 255, .65); }
.searchbox input:focus { outline: 2px solid var(--accent); outline-offset: 2px; background: rgba(255, 255, 255, .18); }
.searchbox button { position: absolute; right: 8px; top: 8px; width: calc(var(--h) - 16px); height: calc(var(--h) - 16px); padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: var(--accent); }
.searchbox button svg { width: 20px; height: 20px; fill: var(--nav); }
.home-hint { margin: -1rem 0 0; color: rgba(255, 255, 255, .7); font-size: 14px; text-align: center; }
.home .msg { max-width: 680px; }

/* Resultados de búsqueda en una sola card */
.card h2 .count { margin-left: .4rem; padding: .05rem .55rem; border-radius: 999px; background: var(--side-bg); color: var(--blue); font-size: .8rem; font-weight: 600; }
.card hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }
.notice { color: #777; font-size: 13px; }
.pager { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid #eee; }
.pager a { padding: .35rem .8rem; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; }
.pager a:hover { background: var(--side-bg); }
.badge-ext { background: var(--blue); margin-left: .35rem; }