/*
* gsm2026.css: diseño "GSM Control 2026" (menú lateral, cabecera, tarjetas).
* Se carga después de Bootstrap 2 y del tema original, y solo cambia la presentación.
* Lo usa layouts/main.php. El layout anterior (main-clasico.php) no lo carga.
*/
:root {
--brand: #f39200;
--brand-600: #dd8200;
--brand-700: #b86b00;
--brand-50: #fff7ed;
--brand-100: #ffedd5;
--ink: #0f172a;
--ink-2: #334155;
--muted: #64748b;
--line: #e2e8f0;
--line-2: #f1f5f9;
--bg: #f4f6fa;
--card: #ffffff;
--ok: #16a34a;
--ok-50: #f0fdf4;
--ko: #dc2626;
--ko-50: #fef2f2;
--side: #0b1220;
--side-2: #131c2e;
--side-text: #a7b1c2;
--r-sm: 8px;
--r: 12px;
--r-lg: 16px;
--sh-1: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .06);
--sh-2: 0 4px 6px -1px rgba(15, 23, 42, .06), 0 10px 24px -6px rgba(15, 23, 42, .10);
--sh-3: 0 20px 45px -12px rgba(15, 23, 42, .25);
--side-w: 256px;
--top-h: 64px;
}
/* ================= Base ================= */
html { -webkit-text-size-adjust: 100%; }
body.gc {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--ink);
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
font-size: 14px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.gc h1, .gc h2, .gc h3, .gc h4, .gc h5, .gc h6, .gc .h3 { font-family: inherit; color: var(--ink); letter-spacing: -.015em; }
.gc input, .gc select, .gc textarea, .gc button, .gc .btn { font-family: inherit; }
.gc a { color: var(--brand-600); transition: color .15s; }
.gc a:hover, .gc a:focus { color: var(--brand-700); text-decoration: none; }
.gc-ico { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: -4px; }
.gc .clear { clear: both; }
/* ================= Menú lateral ================= */
.gc-sidebar {
position: fixed;
inset: 0 auto 0 0;
width: var(--side-w);
background: var(--side);
background-image: radial-gradient(120% 60% at 0% 0%, rgba(243, 146, 0, .16) 0%, rgba(243, 146, 0, 0) 60%);
color: var(--side-text);
display: flex;
flex-direction: column;
z-index: 1040;
overflow-y: auto;
scrollbar-width: thin;
}
.gc-brand {
display: flex;
align-items: center;
justify-content: center;
margin: 18px 16px 10px;
padding: 12px 14px;
background: #fff;
border-radius: var(--r);
box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .5);
}
.gc-brand img { max-height: 46px; max-width: 100%; width: auto; }
.gc-nav { padding: 6px 12px 12px; flex: 1 1 auto; }
.gc-nav-section {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
color: #5d6b82;
padding: 18px 12px 8px;
}
.gc .gc-nav-link {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 9px 12px;
margin: 1px 0;
border-radius: 10px;
color: var(--side-text);
font-weight: 500;
font-size: 14px;
transition: background-color .15s, color .15s;
}
.gc .gc-nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.gc .gc-nav-link .gc-ico { opacity: .85; }
.gc .gc-nav-link.active {
background: linear-gradient(90deg, rgba(243, 146, 0, .22), rgba(243, 146, 0, .06));
color: #fff;
}
.gc .gc-nav-link.active::before {
content: "";
position: absolute;
left: -12px;
top: 8px;
bottom: 8px;
width: 4px;
border-radius: 0 4px 4px 0;
background: var(--brand);
}
.gc .gc-nav-link.active .gc-ico { color: var(--brand); opacity: 1; }
.gc-sidebar-foot { padding: 12px; border-top: 1px solid rgba(255, 255, 255, .06); }
.gc-account { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; }
.gc-avatar {
width: 36px; height: 36px; border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--brand), #ff6a00);
color: #fff; font-weight: 700; font-size: 15px; flex: 0 0 auto;
}
.gc-account-name { color: #fff; font-weight: 600; font-size: 13px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-account-name small { display: block; color: #6f7d93; font-weight: 500; font-size: 12px; }
.gc .gc-logout:hover { background: rgba(220, 38, 38, .14); color: #fecaca; }
/* ================= Cabecera ================= */
.gc-main { margin-left: var(--side-w); min-height: 100vh; display: flex; flex-direction: column; }
.gc-topbar {
position: sticky;
top: 0;
z-index: 1020;
height: var(--top-h);
display: flex;
align-items: center;
gap: 16px;
padding: 0 32px;
background: rgba(255, 255, 255, .85);
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid var(--line);
}
.gc-topbar-crumbs { flex: 1 1 auto; min-width: 0; }
.gc-topbar .breadcrumb { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-topbar .breadcrumb li { text-shadow: none; color: var(--ink); font-weight: 600; }
.gc-topbar .breadcrumb li a { color: var(--muted); font-weight: 500; }
.gc-topbar .breadcrumb .divider { color: #cbd5e1; padding: 0 6px; }
.gc-topbar-title { font-weight: 600; font-size: 15px; }
.gc-topbar-right { display: flex; align-items: center; gap: 12px; }
.gc-date { color: var(--muted); font-size: 13px; }
.gc-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px; border-radius: 999px;
background: var(--brand-50); color: var(--brand-700);
font-weight: 600; font-size: 13px; border: 1px solid var(--brand-100);
}
.gc-pill .gc-ico { width: 16px; height: 16px; }
.gc-burger {
display: none;
border: 1px solid var(--line); background: #fff; border-radius: 10px;
width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--ink); cursor: pointer;
}
.gc-backdrop { display: none; }
/* ================= Página ================= */
.gc-page { flex: 1 1 auto; padding: 28px 32px 40px; width: 100%; max-width: 1360px; box-sizing: border-box; }
.gc #content h1, .gc .gc-content > h1, .gc-page > h1 {
font-size: 26px; font-weight: 700; margin: 0 0 20px; letter-spacing: -.02em; color: var(--ink);
}
.gc-with-aside { display: flex; gap: 24px; align-items: flex-start; }
.gc-with-aside > .gc-content { flex: 1 1 auto; min-width: 0; }
.gc-aside { flex: 0 0 260px; position: sticky; top: calc(var(--top-h) + 24px); }
.gc-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.gc-actions { padding: 14px; }
.gc-card-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 4px 8px 10px; }
.gc .gc-actions .nav { margin: 0; }
.gc .gc-actions .nav > li > a {
border-radius: 10px; color: var(--ink-2); padding: 9px 12px; margin: 1px 0; font-weight: 500; background: none;
}
.gc .gc-actions .nav > li > a:hover { background: var(--brand-50); color: var(--brand-700); }
/* Rejilla de Bootstrap 2 fluida dentro del contenido (solo filas con columnas) */
.gc-page .container, .gc-footer .container { width: auto; max-width: none; padding: 0; }
.gc-page .row:has(> div[class*="span"]),
.gc-footer .row:has(> div[class*="span"]) { display: flex; flex-wrap: wrap; gap: 24px; margin-left: 0; }
.gc-page .row > div[class*="span"],
.gc-footer .row > div[class*="span"] { float: none; margin-left: 0; width: auto; min-width: 0; flex: 1 1 0; }
.gc-page .row > div.span8 { flex: 2 1 0; }
.gc-page .row > div.span12 { flex: 1 1 100%; }
.gc-page .row:before, .gc-page .row:after { display: none; }
.gc-page input[class*="span"], .gc-page textarea[class*="span"], .gc-page select[class*="span"] { max-width: 100%; box-sizing: border-box; }
/* ================= Panel: bienvenida ================= */
.gc-hero {
position: relative;
overflow: hidden;
display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
padding: 28px 32px;
margin-bottom: 24px;
border-radius: 20px;
color: #fff;
background: linear-gradient(120deg, #111a2e 0%, #1c2742 55%, #3a2a12 100%);
box-shadow: var(--sh-2);
}
.gc-hero::after {
content: "";
position: absolute; right: -80px; top: -120px; width: 360px; height: 360px; border-radius: 50%;
background: radial-gradient(circle, rgba(243, 146, 0, .55) 0%, rgba(243, 146, 0, 0) 65%);
pointer-events: none;
}
.gc-hero > * { position: relative; z-index: 1; }
.gc .gc-hero h1 { color: #fff; font-size: 28px; font-weight: 800; margin: 2px 0 6px; letter-spacing: -.025em; }
.gc-hero p { margin: 0; color: #c7d0df; max-width: 560px; }
.gc .gc-hero .gc-hero-kicker { color: #fbbf63; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: 6px; }
.gc-hero-kicker .gc-ico { width: 16px; height: 16px; }
.gc-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.gc .gc-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 16px; border-radius: 12px; font-weight: 600; font-size: 14px;
transition: transform .15s, box-shadow .15s, background-color .15s;
}
.gc .gc-btn:hover { transform: translateY(-1px); }
.gc .gc-btn-light { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .18); }
.gc .gc-btn-light:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.gc .gc-btn-solid { background: var(--brand); color: #fff; box-shadow: 0 8px 20px -6px rgba(243, 146, 0, .6); }
.gc .gc-btn-solid:hover { background: var(--brand-600); color: #fff; }
/* ================= Tarjetas (widgets del tema) ================= */
.gc .widget { margin-bottom: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
.gc .stacked:after, .gc .stacked:before { display: none; }
.gc .widget .widget-header {
height: auto; min-height: 52px; line-height: 52px;
background: none; filter: none; border: 0; border-bottom: 1px solid var(--line-2);
border-radius: 0; box-shadow: none !important; padding: 0 20px;
display: flex; align-items: center; gap: 10px;
}
.gc .widget .widget-header h3, .gc .widget .widget-header .h3 {
position: static; top: auto; left: auto; margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); text-shadow: none; line-height: 1.3;
}
.gc .widget .widget-header [class^="icon-"], .gc .widget .widget-header [class*=" icon-"] { margin: 0; opacity: .45; position: static; top: auto; left: auto; }
.gc .widget .widget-header h3 a { color: var(--ink); }
.gc .widget .widget-header h3 a:hover { color: var(--brand-600); }
.gc .widget .widget-header + .widget-header { border-top: 0; }
.gc .widget .widget-content, .gc .widget .widget-header + .widget-content {
background: none; border: 0; border-radius: 0; box-shadow: none; padding: 20px;
}
.gc .widget.widget-nopad .widget-content { padding: 16px 20px; }
/* Enlaces "Ver últimas 24 h" / "Ver gráfico" del panel como lista con flecha */
.gc .widget > .widget-header:has(h3 > a) { min-height: 54px; }
.gc .widget > .widget-header:has(h3 > a)::after { content: "\203A"; margin-left: auto; color: #94a3b8; font-size: 22px; line-height: 1; }
.gc .widget > .widget-header:has(h3 > a):hover { background: var(--brand-50); }
/* Indicadores del panel */
.gc .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 12px; width: auto; }
.gc .stats .stat {
display: block; float: none; width: auto; height: auto; margin: 0; border: 0;
position: relative; text-align: left;
padding: 16px 16px 14px; border-radius: var(--r);
background: #f8fafc; border: 1px solid var(--line-2);
color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
}
.gc .stats .stat .stat-value {
display: block; font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em;
text-transform: none; margin-bottom: 6px; color: var(--ink) !important;
}
.gc .stats:first-of-type .stat:nth-child(1) .stat-value { color: var(--brand-600) !important; }
.gc .stats:first-of-type .stat:nth-child(2) .stat-value { color: var(--ko) !important; }
.gc .stats:first-of-type .stat:nth-child(3) .stat-value { color: var(--ok) !important; }
.gc .stats .stat::before {
content: ""; position: absolute; top: 14px; right: 14px; width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1;
}
.gc .stats:first-of-type .stat:nth-child(1)::before { background: var(--brand); box-shadow: 0 0 0 4px var(--brand-100); }
.gc .stats:first-of-type .stat:nth-child(2)::before { background: var(--ko); box-shadow: 0 0 0 4px #fee2e2; }
.gc .stats:first-of-type .stat:nth-child(3)::before { background: var(--ok); box-shadow: 0 0 0 4px #dcfce7; }
/* Accesos rápidos */
.gc .shortcuts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; text-align: left; }
.gc .shortcuts .shortcut {
width: auto; margin: 0; padding: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
background: #fff; background-image: none; filter: none;
border: 1px solid var(--line); border-radius: var(--r); box-shadow: none;
transition: border-color .15s, box-shadow .15s, transform .15s;
}
.gc .shortcuts .shortcut:hover { border-color: #fdba74; box-shadow: var(--sh-2); transform: translateY(-2px); background: #fff; }
.gc .shortcuts .shortcut img { display: none; }
.gc .shortcuts .shortcut::before {
content: ""; width: 40px; height: 40px; border-radius: 12px;
background: var(--brand-50) var(--sc-ico, none) center / 22px no-repeat;
box-shadow: inset 0 0 0 1px var(--brand-100);
}
.gc .shortcuts .shortcut-label { margin: 0; color: var(--ink); font-weight: 600; font-size: 14px; }
.gc .shortcut[href*="usuario/create"] { --sc-ico: url("data:image/svg+xml;utf8,"); }
.gc .shortcut[href*="permiso/create"] { --sc-ico: url("data:image/svg+xml;utf8,"); }
.gc .shortcut[href*="accesos/admin"] { --sc-ico: url("data:image/svg+xml;utf8,"); }
.gc .shortcut[href*="site/logout"] { --sc-ico: url("data:image/svg+xml;utf8,"); }
/* Noticias laterales (HTML de cada cliente) */
.gc .news-items { margin: 0; padding: 0; list-style: none; }
.gc .news-items li { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.gc .news-items li:last-child { border-bottom: 0; }
.gc .news-item-date { order: -1; flex: 0 0 48px; text-align: center; background: var(--brand-50); border-radius: 10px; padding: 6px 0; color: var(--brand-700); }
.gc .news-item-day { display: block; font-size: 18px; font-weight: 800; line-height: 1.1; }
.gc .news-item-month { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.gc .news-item-title { font-weight: 600; color: var(--ink); }
.gc .news-item-preview { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
/* ================= Tablas (CGridView) ================= */
.gc .grid-view { padding-top: 0; }
.gc .grid-view .summary { color: var(--muted); font-size: 12.5px; margin: 0 0 10px; text-align: right; }
.gc .grid-view table.items {
width: 100%; border-collapse: separate; border-spacing: 0;
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
box-shadow: var(--sh-1); font-size: 13.5px;
}
.gc .grid-view table.items th {
background: #f8fafc; color: var(--muted); font-weight: 600; font-size: 12px;
text-transform: uppercase; letter-spacing: .04em; text-align: left;
padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: bottom;
}
.gc .grid-view table.items th a { color: var(--muted); }
.gc .grid-view table.items th a:hover, .gc .grid-view table.items th a.asc, .gc .grid-view table.items th a.desc { color: var(--brand-600); }
.gc .grid-view table.items th a.asc:after { content: " \2191"; }
.gc .grid-view table.items th a.desc:after { content: " \2193"; }
.gc .grid-view table.items tr.filters td { background: #f8fafc; padding: 4px 14px 12px; border-bottom: 1px solid var(--line); }
.gc .grid-view table.items tr.filters input, .gc .grid-view table.items tr.filters select { width: 100%; box-sizing: border-box; height: 34px; margin: 0; font-size: 13px; }
.gc .grid-view table.items td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; background: #fff; color: var(--ink-2); }
.gc .grid-view table.items tr.even td { background: #fff; }
.gc .grid-view table.items tbody tr { transition: background-color .12s; }
.gc .grid-view table.items tbody tr:hover td { background: #fffaf3; }
.gc .grid-view table.items tbody tr:last-child td { border-bottom: 0; }
.gc .grid-view table.items td:first-child a { font-weight: 600; }
.gc .grid-view table.items td.empty { color: var(--muted); text-align: center; padding: 36px; font-style: normal; }
.gc .grid-view-loading { opacity: .55; }
/* Botones de acción de las filas: iconos nuevos */
.gc .grid-view td.button-column { white-space: nowrap; text-align: right; width: 1%; }
.gc .grid-view td.button-column a {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; margin-left: 4px; border-radius: 9px;
border: 1px solid var(--line); background: #fff; color: var(--muted);
transition: background-color .15s, color .15s, border-color .15s;
}
.gc .grid-view td.button-column a:hover { border-color: #fdba74; color: var(--brand-600); background: var(--brand-50); }
.gc .grid-view td.button-column a.delete:hover { border-color: #fecaca; color: var(--ko); background: var(--ko-50); }
.gc .grid-view td.button-column a.view img, .gc .grid-view td.button-column a.update img, .gc .grid-view td.button-column a.delete img { display: none; }
.gc .grid-view td.button-column a.view::before, .gc .grid-view td.button-column a.update::before, .gc .grid-view td.button-column a.delete::before {
content: ""; width: 16px; height: 16px; background: currentColor;
-webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.gc .grid-view td.button-column a.view { --m: url("data:image/svg+xml;utf8,"); }
.gc .grid-view td.button-column a.update { --m: url("data:image/svg+xml;utf8,"); }
.gc .grid-view td.button-column a.delete { --m: url("data:image/svg+xml;utf8,"); }
.gc .grid-view td.button-column a img { max-width: 16px; max-height: 16px; }
/* Estado de los accesos: insignias en lugar de iconos */
.gc .grid-view td:has(> img[src*="validation-success"]) > img,
.gc .grid-view td:has(> img[src*="validation-error"]) > img { display: none; }
.gc .grid-view td:has(> img[src*="validation-success"])::before,
.gc .grid-view td:has(> img[src*="validation-error"])::before {
display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.gc .grid-view td:has(> img[src*="validation-success"])::before { content: "\25CF Permitido"; background: var(--ok-50); color: #15803d; box-shadow: inset 0 0 0 1px #bbf7d0; }
.gc .grid-view td:has(> img[src*="validation-error"])::before { content: "\25CF Denegado"; background: var(--ko-50); color: #b91c1c; box-shadow: inset 0 0 0 1px #fecaca; }
/* Paginador */
.gc .pager { margin: 16px 0 0; text-align: right; color: var(--muted); font-size: 12.5px; }
.gc ul.yiiPager { display: inline-flex; gap: 4px; margin: 0 0 0 8px; padding: 0; vertical-align: middle; }
.gc ul.yiiPager li { display: inline-block; margin: 0; }
.gc ul.yiiPager li a {
display: inline-flex; align-items: center; justify-content: center;
min-width: 34px; height: 34px; padding: 0 10px; box-sizing: border-box;
border: 1px solid var(--line); border-radius: 10px; background: #fff;
color: var(--ink-2); font-weight: 600; font-size: 13px;
}
.gc ul.yiiPager li a:hover { border-color: #fdba74; color: var(--brand-600); }
.gc ul.yiiPager li.selected a { background: var(--ink); border-color: var(--ink); color: #fff; }
.gc ul.yiiPager li.hidden a { opacity: .35; }
.gc ul.yiiPager li.first, .gc ul.yiiPager li.last { display: none; }
/* ================= Formularios ================= */
.gc input[type="text"], .gc input[type="password"], .gc input[type="email"], .gc input[type="search"],
.gc input[type="number"], .gc input[type="tel"], .gc input[type="date"], .gc select, .gc textarea {
border: 1px solid #cfd8e3; border-radius: 10px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
color: var(--ink); background-color: #fff; transition: border-color .15s, box-shadow .15s;
}
.gc input[type="text"], .gc input[type="password"], .gc input[type="email"], .gc input[type="search"],
.gc input[type="number"], .gc input[type="tel"], .gc input[type="date"] { height: 24px; padding: 8px 12px; font-size: 14px; }
.gc select { height: 42px; padding: 8px 10px; font-size: 14px; }
.gc textarea { padding: 10px 12px; }
.gc input:focus, .gc select:focus, .gc textarea:focus {
border-color: var(--brand) !important; box-shadow: 0 0 0 4px rgba(243, 146, 0, .16) !important; outline: 0;
}
.gc input::placeholder, .gc textarea::placeholder { color: #94a3b8; }
.gc .form .roww, .gc .form .row { margin: 0 0 16px; }
.gc .form label { font-weight: 600; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.gc .form .note { color: var(--muted); font-size: 13px; margin: 0 0 18px; }
.gc .required, .gc span.required { color: var(--ko); }
.gc .form .buttons { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.gc .errorMessage, .gc .help-inline.error, .gc .help-block.error { color: var(--ko); font-size: 12.5px; margin-top: 6px; }
.gc input.error, .gc select.error, .gc textarea.error { border-color: #fca5a5 !important; background: #fffafa; }
.gc .errorSummary {
background: var(--ko-50); border: 1px solid #fecaca; border-radius: var(--r);
color: #991b1b; padding: 14px 18px; margin-bottom: 18px; font-size: 13px;
}
.gc .errorSummary p { margin: 0 0 6px; font-weight: 600; }
.gc .errorSummary ul { margin: 0 0 0 18px; }
.gc .flash-success, .gc .alert-success { background: var(--ok-50); border: 1px solid #bbf7d0; color: #166534; border-radius: var(--r); padding: 14px 18px; }
/* Tarjeta que envuelve los formularios */
.gc #content > .widget .form, .gc .widget .widget-content > .form { max-width: 560px; }
/* ================= Botones ================= */
.gc .btn {
background-image: none; filter: none; text-shadow: none; box-shadow: var(--sh-1);
border-radius: 10px; border: 1px solid #cfd8e3; background-color: #fff; color: var(--ink-2);
font-weight: 600; font-size: 14px; padding: 8px 16px; line-height: 20px;
transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.gc .btn:hover, .gc .btn:focus { background-color: #f8fafc; background-position: 0 0; color: var(--ink); }
.gc .btn-warning, .gc .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 6px 16px -6px rgba(243, 146, 0, .7); }
.gc .btn-warning:hover, .gc .btn-warning:focus, .gc .btn-warning:active,
.gc .btn-primary:hover, .gc .btn-primary:focus, .gc .btn-primary:active {
background: var(--brand-600); border-color: var(--brand-600); color: #fff; transform: translateY(-1px);
}
.gc .btn-large { padding: 11px 22px; font-size: 15px; border-radius: 12px; }
.gc input[type="submit"]:not(.btn) {
background: var(--brand); border: 1px solid var(--brand); color: #fff; border-radius: 10px;
padding: 9px 18px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 16px -6px rgba(243, 146, 0, .7);
}
.gc input[type="submit"]:not(.btn):hover { background: var(--brand-600); }
/* ================= Pestañas ================= */
.gc .nav-tabs { border-bottom: 1px solid var(--line); margin-bottom: 20px; display: flex; gap: 4px; }
.gc .nav-tabs:before, .gc .nav-tabs:after { display: none; }
.gc .nav-tabs > li { float: none; margin-bottom: -1px; }
.gc .nav-tabs > li > a {
border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin: 0;
color: var(--muted); font-weight: 600; padding: 12px 14px;
}
.gc .nav-tabs > li > a:hover { background: none; color: var(--ink); border-bottom-color: #fed7aa; }
.gc .nav-tabs > .active > a, .gc .nav-tabs > .active > a:hover, .gc .nav-tabs > .active > a:focus {
border: 0; border-bottom: 2px solid var(--brand); color: var(--ink); background: none;
}
/* Ficha (CDetailView) */
.gc table.detail-view { width: 100%; border: 1px solid var(--line); border-radius: var(--r-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; background: #fff; box-shadow: var(--sh-1); }
.gc table.detail-view th, .gc table.detail-view td { padding: 12px 16px; border-bottom: 1px solid var(--line-2); text-align: left; }
.gc table.detail-view th { width: 32%; background: #f8fafc; color: var(--muted); font-weight: 600; font-size: 13px; }
.gc table.detail-view tr:last-child th, .gc table.detail-view tr:last-child td { border-bottom: 0; }
.gc table.detail-view tr.odd td, .gc table.detail-view tr.even td { background: #fff; }
/* Menús desplegables y datepicker */
.gc .dropdown-menu { border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-3); padding: 6px; }
.gc .dropdown-menu > li > a { border-radius: 8px; padding: 8px 12px; }
.gc .dropdown-menu > li > a:hover { background: var(--brand-50); background-image: none; color: var(--brand-700); }
.gc .ui-datepicker { border: 1px solid var(--line) !important; border-radius: var(--r); box-shadow: var(--sh-3); padding: 8px; font-family: inherit; }
.gc .ui-datepicker .ui-widget-header { background: #fff !important; border: 0 !important; color: var(--ink) !important; }
.gc .ui-datepicker td .ui-state-active { background: var(--brand) !important; color: #fff !important; border-radius: 8px; }
/* ================= Pie con el HTML de cada cliente ================= */
.gc-footer { margin: 0 32px 32px; border-radius: 20px; overflow: hidden; }
.gc-footer .extra { margin: 0; padding: 28px 32px; background: var(--side); border: 0; box-shadow: none; color: #8f9bb0; font-size: 13px; }
.gc-footer .extra h4 { color: #fff; font-weight: 600; font-size: 14px; margin-top: 0; }
.gc-footer .extra ul { margin: 0; padding: 0; list-style: none; }
.gc-footer .extra a { color: #fbbf63; }
.gc-footer .footer { background: #070c16; border: 0; padding: 14px 32px; color: #6b778c; }
/* ================= Login ================= */
.gc-auth { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }
.gc-auth-hero {
position: relative; overflow: hidden; display: flex; align-items: center; padding: 56px;
color: #fff; background: #0b1220;
background-image:
radial-gradient(60% 50% at 85% 10%, rgba(243, 146, 0, .45) 0%, rgba(243, 146, 0, 0) 70%),
radial-gradient(50% 50% at 10% 100%, rgba(255, 106, 0, .25) 0%, rgba(255, 106, 0, 0) 70%),
linear-gradient(160deg, #0b1220 0%, #16213a 100%);
}
.gc-auth-hero::after {
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .08;
background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 22px 22px;
}
.gc-auth-hero-inner { position: relative; z-index: 1; max-width: 460px; }
.gc-auth-logo { display: inline-flex; background: #fff; border-radius: var(--r-lg); padding: 14px 18px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6); margin-bottom: 36px; }
.gc-auth-logo img { max-height: 54px; width: auto; }
.gc .gc-auth-hero h2 { color: #fff; font-size: 38px; line-height: 1.12; font-weight: 800; letter-spacing: -.03em; margin: 0 0 14px; }
.gc-auth-hero p { color: #b8c2d3; font-size: 16px; margin: 0 0 28px; }
.gc-auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gc-auth-points li { display: flex; align-items: center; gap: 12px; color: #e2e8f0; font-weight: 500; }
.gc-auth-points .gc-ico { width: 34px; height: 34px; padding: 8px; box-sizing: border-box; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #fbbf63; }
.gc-auth-form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: #fff; }
.gc-login .account-container { width: 100%; max-width: 400px; padding: 0; margin: 0; }
.gc-login #login-form, .gc-login #login-form.well {
width: 100%; max-width: none; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; color: var(--muted); font-family: inherit;
}
.gc-login .login-fields h1 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); margin: 0 0 6px; }
.gc-login .login-fields h1::after { content: "Introduce tus datos para acceder al panel"; display: block; font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-top: 8px; margin-bottom: 26px; }
.gc-login .login-fields p { display: none; }
.gc-login .login-fields input[type='text'], .gc-login .login-fields input[type='password'] {
width: 100%; box-sizing: border-box; height: 48px; margin: 0 0 14px; padding: 12px 14px 12px 44px;
border-radius: 12px; font-size: 15px; background-color: #f8fafc; background-position: 14px center;
}
.gc-login .login-fields input:focus { background-color: #fff; }
.gc-login .login-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.gc-login .login-actions > span { float: none !important; margin: 0 !important; }
.gc-login .login-checkbox label, .gc-login span.login-checkbox { color: var(--ink-2); font-size: 13px; }
.gc-login .login-actions .btn { width: 100%; min-width: 150px; height: 48px; font-size: 15px; }
.gc-login .login-social, .gc-login .login-extra { display: none; }
.gc-login .errorMessage { margin: -8px 0 12px; }
/* Páginas públicas (contacto, legales) */
.gc-guestbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 32px; background: #fff; border-bottom: 1px solid var(--line); }
.gc-guestbar img { max-height: 44px; }
.gc .gc-btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-weight: 600; }
.gc-guest-page { padding: 32px 24px 48px; max-width: 980px; margin: 0 auto; }
/* ================= Responsive ================= */
@media (max-width: 1199px) {
.gc-aside { flex-basis: 220px; }
.gc .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 979px) {
.gc-sidebar { transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--sh-3); }
body.gc-nav-open .gc-sidebar { transform: none; }
body.gc-nav-open .gc-backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 1030; }
.gc-main { margin-left: 0; }
.gc-burger { display: inline-flex; }
.gc-topbar { padding: 0 16px; }
.gc-date { display: none; }
.gc-page { padding: 20px 16px 32px; }
.gc-with-aside { flex-direction: column; }
.gc-aside { position: static; flex-basis: auto; width: 100%; order: -1; }
.gc-actions { padding: 8px; }
.gc-actions .nav { display: flex; flex-wrap: wrap; gap: 6px; }
.gc .gc-actions .nav > li > a { border: 1px solid var(--line); }
.gc-card-title { display: none; }
.gc-page .row:has(> div[class*="span"]), .gc-footer .row:has(> div[class*="span"]) { flex-direction: column; }
.gc-footer { margin: 0 16px 24px; }
.gc-auth { grid-template-columns: 1fr; }
.gc-auth-hero { padding: 32px 24px; }
.gc .gc-auth-hero h2 { font-size: 26px; }
.gc-auth-hero p, .gc-auth-points { display: none; }
.gc-auth-logo { margin-bottom: 18px; }
}
@media (max-width: 767px) {
.gc .grid-view { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gc .grid-view table.items { min-width: 600px; }
.gc-pill { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gc-hero { padding: 22px; }
.gc .gc-hero h1 { font-size: 22px; }
.gc #content h1, .gc .gc-content > h1 { font-size: 21px; }
}
/* Login: fuente e iconos propios (el tema antiguo pedía "Open Sans" sin cargarla y usaba iconos PNG con fondo gris) */
.gc-login .login-fields input[type='text'], .gc-login .login-fields input[type='password'] { font-family: inherit !important; background-size: 18px 18px; background-repeat: no-repeat; }
.gc-login .login-fields input.username-field { background-image: url("data:image/svg+xml;utf8,"); }
.gc-login .login-fields input.password-field { background-image: url("data:image/svg+xml;utf8,"); }
.gc #login-form, .gc .login-fields, .gc .login-actions { font-family: inherit; }
/* Cifras del panel: tamaño adaptable para que "83.33%" quepa en la tarjeta */
.gc .stats .stat { overflow: hidden; padding-right: 26px; }
.gc .stats .stat .stat-value { font-size: clamp(20px, 1.9vw, 30px); white-space: nowrap; }
/* Formularios de gestión: todos los controles con el mismo ancho y alto */
.gc-app .form input[type="text"], .gc-app .form input[type="password"], .gc-app .form input[type="email"],
.gc-app .form input[type="tel"], .gc-app .form input[type="number"], .gc-app .form select {
box-sizing: border-box; width: 100%; max-width: 420px; height: 42px;
}
.gc-app .form textarea { box-sizing: border-box; width: 100%; max-width: 560px; }
/* Botones ver/editar/borrar reconocidos por su imagen (algunas pantallas cambian la clase del enlace) */
.gc .grid-view td.button-column a:has(> img[src$="gridview/view.png"]) > img,
.gc .grid-view td.button-column a:has(> img[src$="gridview/update.png"]) > img,
.gc .grid-view td.button-column a:has(> img[src$="gridview/delete.png"]) > img { display: none; }
.gc .grid-view td.button-column a:has(> img[src$="gridview/view.png"])::before,
.gc .grid-view td.button-column a:has(> img[src$="gridview/update.png"])::before,
.gc .grid-view td.button-column a:has(> img[src$="gridview/delete.png"])::before {
content: ""; width: 16px; height: 16px; background: currentColor;
-webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.gc .grid-view td.button-column a:has(> img[src$="gridview/view.png"]) { --m: url("data:image/svg+xml;utf8,"); }
.gc .grid-view td.button-column a:has(> img[src$="gridview/update.png"]) { --m: url("data:image/svg+xml;utf8,"); }
.gc .grid-view td.button-column a:has(> img[src$="gridview/delete.png"]) { --m: url("data:image/svg+xml;utf8,"); }
.gc .grid-view td.button-column a:has(> img[src$="gridview/delete.png"]):hover { border-color: #fecaca; color: var(--ko); background: var(--ko-50); }
/* Columnas apiladas en pantallas estrechas: cada una con su altura natural */
@media (max-width: 979px) {
.gc-page .row > div[class*="span"], .gc-footer .row > div[class*="span"] { flex: 0 0 auto; width: 100%; }
}
.gc .stats .stat::before { top: 10px; right: 10px; width: 8px; height: 8px; }
.gc .stats .stat { padding-right: 22px; }