/* =========================
   BASE / RESET MOBILE-FIRST
========================= */

:root {
    font-size: 21px;
  
    /* Personalización del verde */
    --pico-primary: #2e7d32;
    --pico-primary-hover: #1b5e20;
  
    /* Ajustes visuales */
    --app-radius: 16px;
    --app-spacing: 1rem;
  }
  
  * {
    box-sizing: border-box;
  }
  
  html, body {
    height: 100%;
  }
  
  body {
    margin: 0;
    background: var(--pico-background-color);
  }
  
  /* fuerza sensación app */
  #app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  
  /* =========================
     LAYOUT APP
  ========================= */
  
  main.container {
    max-width: 100%;
    padding: 1rem;
    min-height: 100vh;
  
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  /* =========================
     HEADER (tipo app)
  ========================= */
  
  header {
    padding: 0.5rem 0;
  }
  
  header h2 {
    margin: 0;
    font-size: 1.4rem;
  }
  
  header p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.7;
  }
  
  /* =========================
     SECCIONES
  ========================= */
  
  section {
    margin: 0;
  }
  
  /* =========================
     TARJETAS
  ========================= */
  
  article {
    border-radius: var(--app-radius);
    padding: 1rem;
  }
  
  article:active {
    transform: scale(0.98);
  }
  
  /* Flash message */
  #flashMessage {
    border-left: 4px solid var(--pico-primary);
  }
  
  /* =========================
     BOTONES
  ========================= */
  
  button {
    border-radius: 12px;
    font-size: 1rem;
    padding: 0.8rem;
  }
  
  /* Botón principal */
  #registerDeliveryBtn {
    width: 100%;
    font-size: 1.2rem;
    padding: 1rem;
  }
  
  /* Botones secundarios en grid */
  .grid {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  .grid button {
    font-size: 0.9rem;
    padding: 0.6rem;
  }
  
  /* Botón peligroso al fondo */
  #clearAllBtn {
    width: 100%;
    margin-top: auto;
  }
  
  /* =========================
     LISTA DE ENTREGAS
  ========================= */
  
  #deliveryList {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0;
  }
  
  #deliveryList li {
    padding: 0.9rem;
    border-radius: 12px;
    margin-bottom: 0.5rem;
    background: var(--pico-card-background-color);
    border: 1px solid var(--pico-muted-border-color);
  }
  
  /* Estado vacío */
  #deliveryList li small {
    opacity: 0.7;
  }
  
  /* =========================
     TEXTO AUXILIAR
  ========================= */
  
  small {
    display: block;
    margin-top: 0.3rem;
  }
  
  #syncStatus {
    font-size: 0.8rem;
    opacity: 0.7;
  }
  
  /* =========================
     ESPACIADO Y TIPOGRAFÍA
  ========================= */
  
  h3 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
  }
  
  p {
    margin: 0.3rem 0;
  }
  
  /* =========================
     MODO OSCURO (opcional)
  ========================= */
  
  @media (prefers-color-scheme: dark) {
    :root {
      --pico-background-color: #121212;
      --pico-card-background-color: #1e1e1e;
    }
  }

 /* Asegura layout vertical real */
main.container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  /* Empuja la zona final abajo */
  .bottom-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1rem;
  }
  
  .bottom-actions button {
    font-size: 0.9rem;
    padding: 0.7rem;
    opacity: 1;
  }
  
  /* Limpiar enviadas (acción útil) */
  #clearSentBtn {
    background: var(--pico-secondary-background);
    color: var(--pico-secondary-inverse);
  }
  
  /* Eliminar todo (peligro) */
  #clearAllBtn {
    background: #c62828;
    color: white;
  }
  
  /* Cerrar sesión (menos importante) */
  #logoutBtn {
    background: transparent;
    color: var(--pico-muted-color);
    border: 1px solid var(--pico-muted-border-color);
  }

  /* TARJETA */
  /* Contenedor */
.delivery-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  
  /* Línea principal */
  .delivery-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
  }
  
  /* Estado */
  .status {
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
  }
  
  /* Estados por tipo */
  .status.pending {
    background: #fff3cd;
    color: #856404;
  }
  
  .status.sent {
    background: #d4edda;
    color: #155724;
  }
  
  .status.error {
    background: #f8d7da;
    color: #721c24;
  }
  
  /* Meta info */
  .delivery-meta {
    opacity: 0.6;
    font-size: 0.8rem;
  }

  /* formulario */
  /* Escala móvil real */
:root {
  font-size: 20px;
}

/* Inputs grandes y cómodos */
input,
textarea {
  padding: 0.7rem;
  font-size: 1rem;
  border-radius: 12px;
  margin-bottom: 0.4rem;
}

/* Espaciado limpio */
form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem; 
}

/* Tarjeta del formulario */
form article {
  padding: 0.8rem;   /* antes 1rem o más */
  gap: 0.6rem;
}

form > article {
  margin-bottom: 0.8rem;
}

/* Botón principal grande */
#saveBtn {
  font-size: 1.2rem;
  padding: 1rem;
  width: 100%;
}

/* Botón volver más discreto */
#backBtn {
  margin-top: 1rem;
  width: 100%;
  opacity: 0.7;
}

/* Labels más claros */
label {
  font-size: 0.95rem;
  font-weight: 600;
  opacity: 0.9;
}