/* 
 * Personalización del Admin de Wagtail
 * Escuela Normal Superior Lácides Iriarte
 */

/* ===================================
   LOGO Y BRANDING
   =================================== */

/* Logo en el sidebar */
.sidebar-header img {
    max-width: 80px !important;
    width: 80px !important;
    height: auto !important;
    padding: 15px 10px !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Ocultar logo de Wagtail */
.sidebar-header .wagtail-logo,
.sidebar-header svg[class*="icon"] {
    display: none !important;
}

/* ===================================
   SIDEBAR
   =================================== */

.sidebar {
    background: #2e3d4e !important;
}

.sidebar-header {
    background: #fff !important;
    border-bottom: 1px solid #e6e6e6 !important;
    padding: 0 !important;
}

.sidebar-header a {
    display: block !important;
    padding: 0 !important;
}

/* Items del menú */
.sidebar-menu-item {
    color: #fff !important;
}

.sidebar-menu-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.sidebar-menu-item.active,
.sidebar-menu-item[aria-current="page"] {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* ===================================
   PÁGINA DE LOGIN
   =================================== */

/* Logo en login */
.login-form img {
    max-width: 120px !important;
    width: 120px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 1.5rem auto !important;
}

/* Ocultar título por defecto */
.login-form h1 {
    display: none !important;
}

/* Fondo del login */
body.login {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
}

/* Contenedor del formulario */
.login-form {
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
    max-width: 400px !important;
    padding: 2rem !important;
}

/* Campos del formulario */
.login-form input[type="text"],
.login-form input[type="password"] {
    border-radius: 6px !important;
    border: 1px solid #d0d5dd !important;
    padding: 0.75rem !important;
    font-size: 0.95rem !important;
}

.login-form input[type="text"]:focus,
.login-form input[type="password"]:focus {
    border-color: #007d7e !important;
    box-shadow: 0 0 0 3px rgba(0, 125, 126, 0.1) !important;
}

/* Botón de inicio de sesión */
.login-form button[type="submit"] {
    background: #007d7e !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 0.875rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    transition: all 0.3s !important;
}

.login-form button[type="submit"]:hover {
    background: #006566 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 125, 126, 0.3) !important;
}

/* Labels */
.login-form label {
    font-weight: 500 !important;
    color: #344054 !important;
    font-size: 0.9rem !important;
}

/* Links */
.login-form a {
    color: #007d7e !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
}

.login-form a:hover {
    text-decoration: underline !important;
}

/* Checkbox */
.login-form input[type="checkbox"] {
    accent-color: #007d7e !important;
}

/* ===================================
   COLORES INSTITUCIONALES
   =================================== */

/* Botones primarios */
.button,
.button-primary,
button[type="submit"]:not(.login-form button) {
    background-color: #007d7e !important;
    border-color: #007d7e !important;
    color: #ffffff !important;
}

.button:hover,
.button-primary:hover,
button[type="submit"]:hover:not(.login-form button) {
    background-color: #006566 !important;
    border-color: #006566 !important;
    color: #ffffff !important;
}

/* Asegurar texto blanco en botones primarios */
.button-primary *,
.button--primary *,
.w-button--primary *,
.button-primary svg,
.button--primary svg,
.w-button--primary svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Botones de acción en headers */
.w-header-actions .button,
.w-header-actions .w-button,
.header-actions .button,
.header .button-primary {
    background-color: #007d7e !important;
    color: #ffffff !important;
    border-color: #007d7e !important;
}

.w-header-actions .button *,
.w-header-actions .w-button *,
.header-actions .button *,
.header .button-primary * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Links activos */
a.active,
.active > a {
    color: #007d7e !important;
}

/* ===================================
   MEJORAS GENERALES
   =================================== */

/* Mejorar el header */
.header {
    background: #fff !important;
    border-bottom: 1px solid #e6e6e6 !important;
}

/* Breadcrumbs */
.breadcrumb {
    color: #666 !important;
}

/* Breadcrumb items */
.breadcrumb li {
    color: #666 !important;
}

.breadcrumb a {
    color: #007d7e !important;
    text-decoration: none !important;
}

.breadcrumb a:hover {
    text-decoration: underline !important;
}

/* Breadcrumb activo (cuadro verde/teal) */
.breadcrumb li[aria-current="page"],
.breadcrumb .w-breadcrumbs__item[aria-current="page"],
.w-breadcrumbs__item--active {
    background-color: #007d7e !important;
    color: #ffffff !important;
    padding: 0.5rem 1rem !important;
    border-radius: 6px !important;
}

.breadcrumb li[aria-current="page"] a,
.breadcrumb .w-breadcrumbs__item[aria-current="page"] a,
.w-breadcrumbs__item--active a {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Separadores del breadcrumb */
.breadcrumb .w-breadcrumbs__chevron,
.breadcrumb svg {
    color: #999 !important;
    opacity: 0.6 !important;
}

/* Cards */
.card {
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Tablas */
.listing th {
    background: #f8f9fa !important;
    font-weight: 600 !important;
}

.listing tbody tr:hover {
    background: #f8f9fa !important;
}

/* ===================================
   BREADCRUMBS - MODO CLARO Y OSCURO
   =================================== */

/* Breadcrumb activo - MODO CLARO */
[data-wagtail-theme="light"] .w-breadcrumbs__item[aria-current="page"],
[data-wagtail-theme="light"] .w-breadcrumbs__item--active {
    background-color: #007d7e !important;
}

[data-wagtail-theme="light"] .w-breadcrumbs__item[aria-current="page"] a,
[data-wagtail-theme="light"] .w-breadcrumbs__item--active a,
[data-wagtail-theme="light"] .w-breadcrumbs__item[aria-current="page"] span,
[data-wagtail-theme="light"] .w-breadcrumbs__item--active span {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Breadcrumb activo - MODO OSCURO */
[data-wagtail-theme="dark"] .w-breadcrumbs__item[aria-current="page"],
[data-wagtail-theme="dark"] .w-breadcrumbs__item--active {
    background-color: #00a8aa !important;
}

[data-wagtail-theme="dark"] .w-breadcrumbs__item[aria-current="page"] a,
[data-wagtail-theme="dark"] .w-breadcrumbs__item--active a,
[data-wagtail-theme="dark"] .w-breadcrumbs__item[aria-current="page"] span,
[data-wagtail-theme="dark"] .w-breadcrumbs__item--active span {
    color: #000000 !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}

/* Separadores en modo oscuro */
[data-wagtail-theme="dark"] .w-breadcrumbs__chevron {
    color: #ccc !important;
}

/* ===================================
   MEJORAS PARA MODO OSCURO
   =================================== */

[data-wagtail-theme="dark"] .header {
    background: #1a1a1a !important;
    border-bottom: 1px solid #333 !important;
}

[data-wagtail-theme="dark"] .sidebar {
    background: #1a1a1a !important;
}

[data-wagtail-theme="dark"] .sidebar-header {
    background: #2a2a2a !important;
    border-bottom: 1px solid #333 !important;
}

[data-wagtail-theme="dark"] .w-breadcrumbs__item {
    color: #ccc !important;
}

[data-wagtail-theme="dark"] .w-breadcrumbs__item a {
    color: #00d4d6 !important;
}

[data-wagtail-theme="dark"] .card,
[data-wagtail-theme="dark"] .w-panel {
    background: #2a2a2a !important;
    border-color: #333 !important;
}

[data-wagtail-theme="dark"] input,
[data-wagtail-theme="dark"] textarea,
[data-wagtail-theme="dark"] select {
    background: #2a2a2a !important;
    border-color: #444 !important;
    color: #fff !important;
}

[data-wagtail-theme="dark"] input:focus,
[data-wagtail-theme="dark"] textarea:focus,
[data-wagtail-theme="dark"] select:focus {
    border-color: #00a8aa !important;
    background: #333 !important;
}

[data-wagtail-theme="dark"] .listing th {
    background: #2a2a2a !important;
    color: #fff !important;
    border-color: #444 !important;
}

[data-wagtail-theme="dark"] .listing td {
    border-color: #333 !important;
    color: #ccc !important;
}

[data-wagtail-theme="dark"] .listing tbody tr:hover {
    background: #333 !important;
}

[data-wagtail-theme="dark"] .button,
[data-wagtail-theme="dark"] .button-primary {
    background-color: #00a8aa !important;
    border-color: #00a8aa !important;
    color: #000 !important;
}

[data-wagtail-theme="dark"] .button:hover,
[data-wagtail-theme="dark"] .button-primary:hover {
    background-color: #00d4d6 !important;
    border-color: #00d4d6 !important;
}