* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: #d9d9d9;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #333;
    padding-top: 70px;
}

.contenedor {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 10px;
}

/* Cabecera fija, iconos rectangulares redondeados, se oculta al hacer scroll down */
.topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 60px;
    background: #f5f5f5;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 1000;
    transition: transform 0.3s ease;
}
.topbar.hidden { transform: translateY(-100%); }

.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
}
.nav-icon.home { background: #000; }
.nav-icon.veh  { background: #43a047; }
.nav-icon.ser  { background: #f9a825; color: #333; }
.nav-icon.web  { background: #1e88e5; }

.recuadro {
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Recuadro azul del index */
.caja-azul { background: #e3f2fd; }
.titulo-app {
    font-size: 35px;
    font-weight: bold;
    color: #1565c0;
    text-align: center;
    line-height: 1.1;
}
.ai-info { text-align: center; font-size: 14px; color: #555; margin-top: 6px; }
.by { text-align: center; font-size: 20px; font-weight: bold; margin-top: 4px; }
.enlaces { text-align: center; margin-top: 10px; }

.titulo-rec {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
}

/* Vehiculos en ovalos, 3 columnas */
.lista-vehiculos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.veh-oval {
    display: block;
    text-align: center;
    background: #43a047;
    color: #fff;
    border-radius: 30px;
    padding: 8px 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.veh-oval.activo { background: #1b5e20; outline: 2px solid #0d47a1; }

/* Chips de filtro tipo */
.filtros { margin: 6px 0 10px; }
.chip {
    display: inline-block;
    padding: 4px 12px;
    margin: 2px;
    border-radius: 14px;
    background: #eee;
    color: #333;
    text-decoration: none;
    font-size: 13px;
}
.chip.activo { background: #333; color: #fff; }

/* Grupo de servicios por vehiculo */
.grupo-veh {
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin: 10px 0;
    padding: 8px;
}
.gv-nombre { font-weight: bold; font-size: 17px; }
.gv-meta { font-size: 14px; color: #666; margin: 2px 0 6px; }

/* Notas (campo datos), recuadro ajustable al texto */
.notas-datos {
    background: #fffbe6;
    border: 1px dashed #c0c0c0;
    border-radius: 6px;
    padding: 8px;
    margin: 6px 0;
    font-size: 14px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Linea de servicio (font +2px sobre la base) */
.linea-servicio {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border-bottom: 1px solid #eee;
    font-size: 17px;
}
.linea-servicio:last-child { border-bottom: none; }
.fecha { font-size: 14px; color: #555; min-width: 82px; }
.desc { flex: 1; }

.btn-redondo {
    display: inline-flex;
    width: 28px; height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #2196f3;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    flex-shrink: 0;
}

.sin-servicios { color: #999; font-size: 14px; padding: 4px; }
.vacio { color: #999; padding: 8px 0; }

/* CRUD */
.cabecera-rec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.cabecera-rec h1 { font-size: 20px; }

.lista-crud { margin-top: 6px; }
.linea-crud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px;
    border-bottom: 1px solid #eee;
    font-size: 17px;
}
.crud-nombre { text-decoration: none; color: #333; flex: 1; }
.crud-acciones { display: flex; gap: 6px; align-items: center; }

.icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 15px;
    border: none;
    cursor: pointer;
}
.icono-editar { background: #43a047; color: #fff; }
.icono-borrar { background: #e53935; color: #fff; }

.inline { display: inline; }

/* Botones */
.boton {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
}
.boton-verde { background: #43a047; color: #fff; }
.boton-rojo { background: #e53935; color: #fff; }
.boton-azul { background: #1e88e5; color: #fff; }
.boton-gris { background: #9e9e9e; color: #fff; }

/* Formularios */
.form { margin: 10px 0; }
.form label { display: block; margin-top: 8px; font-weight: bold; font-size: 14px; }
.form input, .form select, .form textarea {
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
}
.form textarea { resize: vertical; }
.form-acciones { margin-top: 12px; display: flex; gap: 8px; }

.mensaje { padding: 8px; border-radius: 6px; margin: 8px 0; }
.mensaje.error { background: #ffebee; color: #c62828; }

/* Detalle */
.detalle { font-size: 16px; }
.det-linea { padding: 5px 0; border-bottom: 1px solid #f0f0f0; }
.det-linea strong { display: inline-block; min-width: 120px; }