/* Estilos del frontend del plugin Control de Partes Diarios.
   Con prefijo pd- para no chocar con el tema de WordPress. */

.pd-tarjeta {
    background: #ffffff;
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    padding: 28px;
    max-width: 900px;
    margin: 20px auto;
}

.pd-tarjeta-angosta {
    max-width: 480px;
}

.pd-tarjeta h2 { margin-top: 0; }
.pd-subtitulo { color: #6b7280; margin-top: 4px; }

.pd-tarjeta label {
    display: block;
    margin-top: 14px;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.9rem;
}

.pd-tarjeta input[type="text"],
.pd-tarjeta input[type="date"],
.pd-tarjeta input[type="file"],
.pd-tarjeta textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    box-sizing: border-box;
}

.pd-tarjeta textarea { resize: vertical; }

.pd-boton {
    display: inline-block;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 1rem;
    cursor: pointer;
}

.pd-boton-primario {
    background: #1d4ed8;
    color: #fff;
    margin-top: 20px;
    width: 100%;
}
.pd-boton-primario:hover { background: #1e3a8a; color: #fff; }

.pd-alerta {
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.95rem;
}
.pd-alerta-error { background: #fdecea; color: #b91c1c; }
.pd-alerta-exito { background: #eaf1fb; color: #1e3a8a; }
.pd-alerta-exito a { color: #1e3a8a; font-weight: 600; text-decoration: underline; margin-left: 6px; }

.pd-encabezado-formulario {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 4px;
}
.pd-encabezado-formulario h2 { margin: 0; }
.pd-enlace-nav {
    font-size: 0.9rem;
    color: #1d4ed8;
    text-decoration: none;
    white-space: nowrap;
}
.pd-enlace-nav:hover { text-decoration: underline; }

.pd-acciones-encabezado {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    width: 100%;
}
.pd-enlace-nav, .pd-enlace-salir {
    text-decoration: none;
    white-space: nowrap;
}
.pd-boton-fantasma {
    background: transparent;
    color: #4b5563;
    border: 1px solid #d1d5db;
    width: auto;
    margin-top: 0;
    padding: 9px 16px;
    font-size: 0.9rem;
}
.pd-boton-fantasma:hover { background: #f3f4f6; color: #b42318; border-color: #b42318; }

/* Botones de navegación del encabezado (formulario, historial, reporte),
   cada uno con un color propio para que se distingan de un vistazo. */
.pd-acciones-encabezado .pd-boton {
    width: auto;
    margin-top: 0;
    padding: 9px 16px;
    font-size: 0.9rem;
    border: 1px solid transparent;
    font-weight: 600;
}

/* Acción principal: ir al formulario o al historial. */
.pd-boton-ir {
    background: #1d4ed8;
    color: #fff;
}
.pd-boton-ir:hover { background: #1e3a8a; color: #fff; }

/* Volver al panel general (conductores o administradores): neutro. */
.pd-boton-panel {
    background: #eef2f7;
    color: #334155;
    border-color: #cbd5e1;
}
.pd-boton-panel:hover { background: #e2e8f0; }

/* Panel de administración: color distinto para que se note que es una
   acción exclusiva de administradores/gestores. */
.pd-boton-admin {
    background: #6d28d9;
    color: #fff;
}
.pd-boton-admin:hover { background: #5b21b6; color: #fff; }

/* Cerrar sesión: siempre en tono rojo suave, para que se identifique como
   la acción de "salir" y quede aparte de los botones de navegación. */
.pd-boton-salir {
    background: #fff;
    color: #b91c1c;
    border-color: #fca5a5;
}
.pd-boton-salir:hover { background: #fef2f2; border-color: #b91c1c; }

/* Empuja el elemento (normalmente "Cerrar sesión") hacia el extremo
   derecho del grupo de botones, separándolo visualmente del resto. */
.pd-empujar-derecha { margin-left: auto; }

.pd-tarjeta-reporte { max-width: 1200px; }

.pd-form-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
    margin: 16px 0;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
}
.pd-form-filtros > div { min-width: 160px; }
.pd-form-filtros input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-sizing: border-box;
}

.pd-boton-secundario {
    background: #e5e7eb;
    color: #1f2937;
    width: auto;
    margin-top: 0;
}
.pd-boton-secundario:hover { background: #d1d5db; color: #1f2937; }

.pd-boton-peligro {
    background: #fdecea;
    color: #b91c1c;
    width: auto;
    margin-top: 0;
    padding: 6px 12px;
    font-size: 0.85rem;
}
.pd-boton-peligro:hover { background: #fbd5d2; color: #b91c1c; }

.pd-tabla-scroll { overflow-x: auto; }
.pd-tabla { width: 100%; border-collapse: collapse; margin-top: 12px; }
.pd-tabla th, .pd-tabla td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
    white-space: nowrap;
}
.pd-tabla th { color: #6b7280; font-weight: 600; }

.pd-miniatura {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #d1d5db;
}

/* Aviso de "guardado con éxito": una tarjeta flotante grande que aparece
   arriba de la pantalla un momento después de registrar un parte, sin
   oscurecer el resto de la página. Pensada para que se note incluso desde
   lejos y sin tener que leer texto pequeño. Se oculta sola con JavaScript. */
.pd-toast-exito {
    position: fixed;
    top: 18px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    border: 2px solid #bbf7d0;
    border-left: 8px solid #16a34a;
    border-radius: 16px;
    padding: 18px 30px 18px 22px;
    box-shadow: 0 16px 44px rgba(15, 23, 42, 0.28);
    max-width: min(92vw, 480px);
    z-index: 99999;
    opacity: 1;
    box-sizing: border-box;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
    animation: pd-toast-entrada 0.4s ease;
}
.pd-toast-exito.pd-toast-oculto {
    opacity: 0;
    transform: translateX(-50%) translateY(-18px);
    pointer-events: none;
}
@keyframes pd-toast-entrada {
    from { opacity: 0; transform: translateX(-50%) translateY(-26px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.pd-toast-icono {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    line-height: 52px;
    text-align: center;
    border-radius: 50%;
    background: #16a34a;
    color: #ffffff;
    font-size: 28px;
    font-weight: bold;
}
.pd-toast-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pd-toast-texto strong {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.3;
    color: #14532d;
}
.pd-toast-texto span {
    font-size: 15px;
    color: #4b5563;
}

/* El formulario de login de WordPress dentro de nuestra tarjeta */
.pd-tarjeta .login-username input,
.pd-tarjeta .login-password input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-sizing: border-box;
}
.pd-tarjeta form#loginform p { margin-top: 14px; }
.pd-tarjeta form#loginform .button {
    background: #1d4ed8;
    border-color: #1e3a8a;
    color: #fff;
    width: 100%;
    text-align: center;
    padding: 8px;
    border-radius: 8px;
    margin-top: 10px;
}

/* Aviso mientras se optimiza y sube la foto. El botón queda deshabilitado
   para que nadie pulse dos veces y termine con el mismo parte duplicado. */
.pd-aviso-envio {
    margin-top: 10px;
    padding: 10px 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #1e3a8a;
    font-size: 0.9rem;
}
.pd-boton[disabled] {
    opacity: 0.65;
    cursor: progress;
}

/* Paginación del historial: mostramos 20 partes por página para que la
   tabla (y sus fotos) cargue rápido incluso con cientos de registros. */
.pd-paginacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.pd-paginacion-info {
    color: #6b7280;
    font-size: 0.9rem;
}

/* Las observaciones ya no se cortan en una sola línea infinita. */
.pd-tabla td.pd-celda-observaciones {
    white-space: normal;
    max-width: 320px;
    min-width: 160px;
}

/* Reserva el espacio de la miniatura mientras carga, para que la tabla no
   "salte" al ir apareciendo las fotos. */
.pd-miniatura {
    background: #f3f4f6;
}
.pd-aviso-envio[hidden] { display: none; }