:root {
    --tblr-primary: #066fd1;
    --mymovies-brand: #f7941d;
    --mymovies-heading: #066fd1;
    --mymovies-header-bg: #1a2332;
    --mymovies-header-menu-bg: #222d3f;
    --mymovies-header-text: #e8edf4;
    --mymovies-header-muted: #94a3b8;
}

/* Login: mitad imagen + mitad formulario */
.mymovies-login-body {
    margin: 0;
}

.mymovies-login-page {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

.mymovies-login-cover {
    flex: 1 1 50%;
    min-height: 100vh;
    min-height: 100dvh;
    background: url('/img/fondo.jpg') center center / cover no-repeat;
}

.mymovies-login-panel {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background-color: var(--tblr-bg-surface, #fff);
}

.mymovies-login-panel-inner {
    width: 100%;
    max-width: 24rem;
}

.mymovies-login-hero {
    margin-bottom: 1.75rem;
}

@media (max-width: 991.98px) {
    .mymovies-login-cover {
        display: none;
    }

    .mymovies-login-panel {
        flex: 1 1 100%;
        padding: 2rem 1.25rem 2.5rem;
    }
}

.mymovies-login-brand {
    display: inline-block;
    text-decoration: none;
    line-height: 0;
    margin-bottom: 1rem;
    filter: drop-shadow(0 4px 12px rgba(247, 148, 29, 0.35));
}

.mymovies-login-logo {
    display: block;
    width: 96px !important;
    height: 96px !important;
    max-width: 96px;
    max-height: 96px;
    border-radius: 1rem;
    object-fit: contain;
}

.mymovies-login-title {
    margin: 0 0 0.35rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--mymovies-header-bg, #1a2332);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.mymovies-login-subtitle {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--tblr-secondary, #6b7280);
    line-height: 1.45;
}

.mymovies-login-card .card-body {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.mymovies-login-form .input,
.mymovies-login-form .form-group {
    margin-bottom: 0;
}

.mymovies-login-card .alert:last-child {
    margin-bottom: 1rem;
}

/* Cabecera: azul marino acorde al icono, acentos naranja */
.mymovies-navbar-top {
    background-color: var(--mymovies-header-bg);
    border-bottom: none;
    box-shadow: none !important;
    min-height: 3.25rem;
}

.mymovies-navbar-top .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--mymovies-header-text);
}

.mymovies-navbar-top .navbar-toggler-icon {
    filter: invert(1) brightness(0.9);
}

.mymovies-navbar-menu {
    background-color: var(--mymovies-header-menu-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.mymovies-navbar-menu .navbar {
    background-color: transparent;
    box-shadow: none !important;
}

/* Sin subrayado Tabler en la opción activa */
.mymovies-navbar-menu.navbar-expand-md .nav-item.active::after,
.mymovies-navbar-menu .nav-item.active::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

.mymovies-navbar-menu .nav-link {
    color: var(--mymovies-header-muted);
}

.mymovies-navbar-menu .nav-link:hover,
.mymovies-navbar-menu .nav-link:focus,
.mymovies-navbar-menu .nav-item.active > .nav-link,
.mymovies-navbar-menu .nav-item.show > .nav-link {
    color: var(--mymovies-header-text);
}

.mymovies-navbar-menu .nav-item.active > .nav-link {
    color: var(--mymovies-brand);
    font-weight: 600;
}

.mymovies-navbar-menu .dropdown-item.active {
    color: var(--mymovies-brand);
    background-color: rgba(247, 148, 29, 0.12);
}

.mymovies-navbar-menu .nav-link-icon {
    color: inherit;
}

.mymovies-btn-logout {
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--mymovies-header-text);
}

.mymovies-btn-logout:hover {
    background-color: var(--mymovies-brand);
    border-color: var(--mymovies-brand);
    color: #1a2332;
}

.mymovies-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
}

.mymovies-logo-link:hover .mymovies-logo-text {
    color: #fff;
}

.mymovies-navbar-top .navbar-brand {
    margin-right: 0;
    padding: 0;
    font-size: inherit;
}

.mymovies-navbar-top .mymovies-logo-img {
    display: block;
    width: 32px !important;
    height: 32px !important;
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
    border-radius: 0.35rem;
    flex-shrink: 0;
}

.mymovies-logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mymovies-header-text);
    letter-spacing: -0.02em;
    line-height: 1;
}

/* Tabler pone card-header en flex fila: forzar apilado vertical */
.card-header.peliculas-list-header {
    flex-direction: column;
    align-items: stretch;
}

.card-header .mymovies-page-title {
    font-size: 1.3125rem;
    font-weight: 600;
    color: var(--mymovies-heading);
}

.peliculas-filtro {
    width: 100%;
}

.peliculas-filtro-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
    width: 100%;
}

.peliculas-filtro-field {
    flex: 1 1 9rem;
    min-width: 0;
}

.peliculas-filtro-field-fecha {
    flex: 0 0 auto;
    width: 10.75rem;
    max-width: 10.75rem;
}

.peliculas-filtro-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    margin-left: auto;
}

.peliculas-filtro .input,
.peliculas-filtro .select {
    margin-bottom: 0;
}

.formato-celda {
    background-color: var(--tblr-gray-200, #e9ecef);
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.table-mymovies-list thead th .sort-link {
    color: inherit;
    white-space: nowrap;
}

.table-mymovies-list thead th .sort-link:hover {
    color: var(--tblr-primary);
}

.table-mymovies-list thead th .sort-link .icon {
    font-size: 0.75rem;
    vertical-align: middle;
}

#table-peliculas.table th,
#table-peliculas.table td,
.table-mymovies-list th,
.table-mymovies-list td {
    vertical-align: top !important;
}

/* Listado películas: título un poco mayor; alta y formatos al mismo tamaño */
.table-mymovies-list .pelicula-list-titulo {
    font-size: 1rem;
    line-height: 1.35;
}

.table-mymovies-list .pelicula-list-principal {
    font-size: 0.875rem;
    line-height: 1.4;
}

#table-peliculas.table-mymovies-list td.pelicula-list-formatos-col {
    color: var(--tblr-primary, #066fd1) !important;
}

.table-mymovies-list .pelicula-list-meta {
    font-size: 0.75rem;
    line-height: 1.35;
    margin-top: 0.15rem;
}

.table-mymovies-list .pelicula-list-meta .ti-star-filled {
    font-size: 0.7rem;
    vertical-align: 0.05em;
}

/* Acciones: iconos compactos, sin huecos entre botones */
.table-mymovies-list .pelicula-list-actions-col {
    width: 1%;
    white-space: nowrap;
}

.table-mymovies-list .pelicula-list-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    justify-content: flex-end;
}

.table-mymovies-list .pelicula-list-actions form {
    display: inline-flex;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.table-mymovies-list .pelicula-list-actions input[type="hidden"] {
    display: none !important;
}

.table-mymovies-list .pelicula-list-actions .btn.btn-icon {
    --tblr-btn-padding-x: 0;
    --tblr-btn-padding-y: 0;
    --tblr-btn-icon-size: 1.125rem;
    min-width: 1.5rem !important;
    min-height: 1.5rem !important;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0 !important;
    margin: 0;
    flex-shrink: 0;
    line-height: 1;
    box-shadow: none;
}

.table-mymovies-list .pelicula-list-actions .btn.btn-icon .ti {
    margin: 0;
    width: 1.125rem;
    height: 1.125rem;
    font-size: 1.125rem;
    line-height: 1;
    display: block;
}

.chosen-container {
    width: 100% !important;
}

.chosen-choices {
    border: 1px solid var(--tblr-border-color, #dee2e6) !important;
    font-size: 1rem !important;
    width: 100% !important;
    padding: 5px !important;
    border-radius: var(--tblr-border-radius, 0.25rem) !important;
}

/* Formulario película: cebreado en etiquetas, campos en blanco */
.pelicula-edit-card .pelicula-form-grid .pelicula-form-label {
    color: var(--tblr-secondary, #6b7280) !important;
    border-right: 1px solid var(--tblr-border-color, #e5e7eb);
    text-transform: none;
    font-weight: 600;
}

.pelicula-edit-card .pelicula-form-row:nth-child(odd) .pelicula-form-label {
    background-color: var(--tblr-gray-100, #f3f4f6) !important;
}

.pelicula-edit-card .pelicula-form-row:nth-child(even) .pelicula-form-label {
    background-color: var(--tblr-gray-200, #e5e7eb) !important;
}

.pelicula-edit-card .pelicula-form-row-multi:nth-child(odd) .pelicula-form-label:nth-child(1),
.pelicula-edit-card .pelicula-form-row-multi:nth-child(odd) .pelicula-form-label:nth-child(5) {
    background-color: var(--tblr-gray-100, #f3f4f6) !important;
}

.pelicula-edit-card .pelicula-form-row-multi:nth-child(odd) .pelicula-form-label:nth-child(3) {
    background-color: var(--tblr-gray-200, #e5e7eb) !important;
}

.pelicula-edit-card .pelicula-form-row-multi:nth-child(even) .pelicula-form-label:nth-child(1),
.pelicula-edit-card .pelicula-form-row-multi:nth-child(even) .pelicula-form-label:nth-child(5) {
    background-color: var(--tblr-gray-200, #e5e7eb) !important;
}

.pelicula-edit-card .pelicula-form-row-multi:nth-child(even) .pelicula-form-label:nth-child(3) {
    background-color: var(--tblr-gray-100, #f3f4f6) !important;
}

.pelicula-edit-card .pelicula-form-row-ids:nth-child(odd) .pelicula-form-label:nth-child(1) {
    background-color: var(--tblr-gray-100, #f3f4f6) !important;
}

.pelicula-edit-card .pelicula-form-row-ids:nth-child(odd) .pelicula-form-label:nth-child(3) {
    background-color: var(--tblr-gray-200, #e5e7eb) !important;
}

.pelicula-edit-card .pelicula-form-row-ids:nth-child(even) .pelicula-form-label:nth-child(1) {
    background-color: var(--tblr-gray-200, #e5e7eb) !important;
}

.pelicula-edit-card .pelicula-form-row-ids:nth-child(even) .pelicula-form-label:nth-child(3) {
    background-color: var(--tblr-gray-100, #f3f4f6) !important;
}

.pelicula-edit-card .pelicula-form-field,
.pelicula-edit-card .pelicula-form-row:nth-child(odd) .pelicula-form-field,
.pelicula-edit-card .pelicula-form-row:nth-child(even) .pelicula-form-field,
.pelicula-edit-card .pelicula-form-row-multi .pelicula-form-field,
.pelicula-edit-card .pelicula-form-row-ids .pelicula-form-field {
    background-color: #fff !important;
}

.pelicula-edit-card .pelicula-form-field .form-control,
.pelicula-edit-card .pelicula-form-field .form-select,
.pelicula-edit-card .pelicula-form-field .chosen-container-multi .chosen-choices {
    background-color: #fff !important;
}

.pelicula-edit-card .pelicula-form-row {
    border-bottom: 1px solid var(--tblr-border-color, #e5e7eb);
}

/* Sidebar: portada y visualizaciones (variables --bs-* no existen en Tabler) */
.pelicula-edit-card .pelicula-portada-solo-lectura .pelicula-portada-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    padding: 1rem;
    text-align: center;
    border: 1px dashed var(--tblr-border-color, #dee2e6);
    border-radius: var(--tblr-border-radius, 0.25rem);
    background-color: var(--tblr-gray-100, #f3f4f6);
}

.pelicula-edit-card .pelicula-portada-dropzone {
    border: 2px dashed var(--tblr-border-color, #dee2e6) !important;
    border-radius: var(--tblr-border-radius, 0.25rem);
    background-color: var(--tblr-gray-100, #f3f4f6) !important;
}

.pelicula-edit-card .pelicula-portada-dropzone:hover {
    border-color: var(--tblr-primary, #066fd1) !important;
    background-color: var(--tblr-gray-200, #e5e7eb) !important;
}

.pelicula-edit-card .pelicula-portada-dropzone-label {
    color: var(--tblr-secondary, #6b7280);
}

.pelicula-edit-card .pelicula-portada-delete {
    border-radius: var(--tblr-border-radius, 0.25rem);
}

.pelicula-edit-card .pelicula-vistas-heading {
    color: var(--tblr-primary, #066fd1);
    margin-bottom: 0;
}

.pelicula-edit-card .pelicula-vistas-heading .ti {
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
}

.pelicula-edit-card .pelicula-vistas-list {
    margin-top: 0.5rem;
    padding-left: 0;
    border: 1px solid var(--tblr-border-color, #dee2e6) !important;
    border-radius: var(--tblr-border-radius, 0.25rem);
    background-color: var(--tblr-bg-surface, #fff) !important;
    overflow: hidden;
}

.pelicula-edit-card .pelicula-vistas-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--tblr-border-color, #dee2e6);
}

.pelicula-edit-card .pelicula-vistas-item:last-child {
    border-bottom: none;
}

.pelicula-edit-card .pelicula-vistas-item:nth-child(odd) {
    background-color: var(--tblr-gray-100, #f3f4f6);
}

.pelicula-edit-card .pelicula-vistas-fecha {
    color: var(--tblr-body-color, inherit);
}

.pelicula-edit-card .pelicula-vistas-puntos {
    font-weight: 600;
    color: var(--tblr-secondary, #6b7280);
}

.pelicula-edit-card .pelicula-vistas-puntos .ti-star-filled {
    font-size: 0.7rem;
    vertical-align: 0.05em;
}

.pelicula-edit-card .pelicula-vistas-empty {
    margin-top: 0.5rem;
    margin-bottom: 0;
    padding: 0.4rem 0.65rem;
    font-size: 0.8125rem;
    color: var(--tblr-secondary, #6b7280);
    text-align: left;
    border: 1px solid var(--tblr-border-color, #dee2e6);
    border-radius: var(--tblr-border-radius, 0.25rem);
    background-color: var(--tblr-bg-surface, #fff);
}

/* Formatos: filas tipo tarjeta con separadores verticales (no tabla) */
.pelicula-edit-card .pelicula-formatos-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: none;
    background: transparent;
    overflow: visible;
}

.pelicula-edit-card .pelicula-formato-item {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    min-width: 0;
    border: 1px solid var(--tblr-border-color, #dee2e6);
    border-radius: var(--tblr-border-radius, 0.25rem);
    background-color: #fff;
    padding: 0.4rem 0;
}

.pelicula-edit-card .pelicula-formato-celda {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0.1rem 0.65rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--tblr-body-color, #1f2937);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    border-left: none;
    background: transparent;
}

.pelicula-edit-card .pelicula-formato-celda + .pelicula-formato-celda::before,
.pelicula-edit-card .pelicula-formato-celda + .pelicula-formato-actions::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 1px;
    background-color: var(--tblr-border-color, #dee2e6);
}

.pelicula-edit-card .pelicula-formato-celda-fecha {
    flex: 0 0 5.25rem;
}

.pelicula-edit-card .pelicula-formato-celda-formato {
    flex: 1 1 4.5rem;
    color: var(--tblr-primary, #066fd1);
    font-weight: 500;
}

.pelicula-edit-card .pelicula-formato-celda-edicion {
    flex: 1 1 5rem;
}

.pelicula-edit-card .pelicula-formato-celda-ubicacion {
    flex: 1.4 1 6rem;
}

.pelicula-edit-card .pelicula-formato-celda-pais {
    flex: 1 1 4.5rem;
}

.pelicula-edit-card .pelicula-formato-celda-precio {
    flex: 0 0 4.25rem;
    justify-content: flex-end;
    text-align: right;
}

.pelicula-edit-card .pelicula-formato-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0;
    padding: 0 0.25rem 0 0.35rem;
    position: relative;
}

.pelicula-edit-card .pelicula-formato-actions form {
    display: inline-flex;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.pelicula-edit-card .pelicula-formato-actions input[type="hidden"] {
    display: none !important;
}

.pelicula-edit-card .pelicula-formato-actions .btn.btn-icon {
    --tblr-btn-padding-x: 0;
    --tblr-btn-padding-y: 0;
    --tblr-btn-icon-size: 1.125rem;
    min-width: 1.5rem !important;
    min-height: 1.5rem !important;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0 !important;
    margin: 0;
    flex-shrink: 0;
    line-height: 1;
    box-shadow: none;
}

.pelicula-edit-card .pelicula-formato-actions .btn.btn-icon .ti {
    margin: 0;
    width: 1.125rem;
    height: 1.125rem;
    font-size: 1.125rem;
    line-height: 1;
    display: block;
}

.pelicula-edit-card .pelicula-formatos-footer {
    margin-top: 0.65rem;
    padding-top: 0;
}

/* ==========================================================================
   Componente de Fecha Reutilizable (Date Input Component)
   ========================================================================== */
:root {
    /* Ancho fijo para inputs de fecha (incluyendo icono de calendario) */
    --date-input-width: 10.5rem;
}

/* Contenedor del campo fecha: aplica el ancho fijo */
.date-input-col {
    flex: 0 0 var(--date-input-width) !important;
    width: var(--date-input-width) !important;
    min-width: var(--date-input-width) !important;
    max-width: var(--date-input-width) !important;
}

/* El input interno de tipo fecha */
.date-input-field,
input[type="date"].date-input-field.form-control {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Anulación de ancho fijo en grids de Bootstrap (si se anidan dentro de .col-*) */
[class*='col-'] > .date-input-col {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Comportamiento responsivo para pantallas móviles (< 768px) */
@media (max-width: 767.98px) {
    .date-input-form-fields-row > .date-input-col,
    .date-input-col {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* Estilo para simular el placeholder (texto gris claro cuando está vacío) */
input[type="date"].date-input-field.date-input-empty,
input[type="date"].date-input-field.date-input-empty::-webkit-datetime-edit-text,
input[type="date"].date-input-field.date-input-empty::-webkit-datetime-edit-day-field,
input[type="date"].date-input-field.date-input-empty::-webkit-datetime-edit-month-field,
input[type="date"].date-input-field.date-input-empty::-webkit-datetime-edit-year-field {
    color: #94a3b8 !important;
}

/* Color de texto normal cuando se selecciona un valor */
input[type="date"].date-input-field:not(.date-input-empty),
input[type="date"].date-input-field:not(.date-input-empty)::-webkit-datetime-edit-text,
input[type="date"].date-input-field:not(.date-input-empty)::-webkit-datetime-edit-day-field,
input[type="date"].date-input-field:not(.date-input-empty)::-webkit-datetime-edit-month-field,
input[type="date"].date-input-field:not(.date-input-empty)::-webkit-datetime-edit-year-field {
    color: var(--tblr-body-color, #1f2937) !important;
}