/**
 * El "+" de myrentix y lo que abre: un solo chip y una sola fila hija para todas las
 * tablas de la app.
 *
 * Se pinta de dos maneras distintas y las dos tienen que verse igual:
 *
 *  - Como <button class="chip-desglose">, el botón que despliega el desglose de un abono
 *    en /mis-retiradas y en el backoffice de retiradas.
 *  - Como el control de la extensión `responsive` de DataTables, que en cuanto una tabla
 *    no cabe a lo ancho inyecta su propio "+" con un pseudo-elemento en la primera celda.
 *    Venía en VERDE con borde blanco y sombra (el estilo de fábrica de la librería, ajeno
 *    a la marca) y el "-" abierto en rojo; aquí se repintan los dos con el chip azul.
 *
 * Se carga desde plantillas/layout.blade.php DESPUÉS de @yield('css') a propósito: cada
 * vista enlaza responsive.dataTables.min.css dentro de esa sección, así que este fichero
 * necesita ir detrás para ganar en cascada. Si se moviera al <head>, junto al resto de
 * hojas globales, haría falta un !important por regla.
 */

/* ---- El chip como botón ------------------------------------------------- */
.chip-desglose {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.4rem; height: 1.4rem; border-radius: 9999px;
    background: #1C95DA; color: #fff; font-weight: 700; font-size: .85rem; line-height: 1;
    border: 0; cursor: pointer; padding: 0;
}
.chip-desglose:hover { background: #1577ae; }

/* La celda que solo lleva el chip: que no se coma el ancho de las de datos. */
td.col-toggle { width: 2.2rem; }

/* ---- El mismo chip como control de DataTables Responsive ----------------- */
/* Modo `inline` (el de por defecto): el control vive en la primera celda, pegado
   al contenido, así que hay que abrirle sitio con el padding izquierdo. */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
    padding-left: 34px;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    top: 50%;
    left: 6px;
    width: 1.4rem;
    height: 1.4rem;
    /* La mitad del alto: es lo que centra el chip en la fila, junto al top:50%. */
    margin-top: -.7rem;
    line-height: 1.4rem;
    border: 0;
    border-radius: 9999px;
    box-shadow: none;
    background-color: #1C95DA;
    color: #fff;
    font-family: "Comfortaa", sans-serif;
    font-weight: 700;
    font-size: .85rem;
    text-indent: 0 !important;
    content: "+";
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:hover:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:hover:before {
    background-color: #1577ae;
}
/* Fila abierta. El menos es U+2212 (el mismo que pone mis_retiradas.js al desplegar),
   escapado para no depender de con qué charset sirva nginx este fichero. */
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
    content: "\2212";
    background-color: #1C95DA;
}

/* Variante `compact`: la librería encoge el control a 14px. Mantenemos la proporción. */
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control {
    padding-left: 30px;
}
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control:before {
    left: 5px;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: -.575rem;
    line-height: 1.15rem;
    border-radius: 9999px;
    font-size: .75rem;
    text-indent: 0 !important;
}

/* Modo `column`: el control ocupa una columna propia y va centrado en la celda. */
table.dataTable.dtr-column > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-column > tbody > tr > th.dtr-control:before,
table.dataTable.dtr-column > tbody > tr > td.control:before,
table.dataTable.dtr-column > tbody > tr > th.control:before {
    top: 50%;
    left: 50%;
    width: 1.4rem;
    height: 1.4rem;
    margin-top: -.7rem;
    margin-left: -.7rem;
    line-height: 1.4rem;
    border: 0;
    border-radius: 9999px;
    box-shadow: none;
    background-color: #1C95DA;
    color: #fff;
    font-family: "Comfortaa", sans-serif;
    font-weight: 700;
    font-size: .85rem;
    text-indent: 0 !important;
    content: "+";
}
table.dataTable.dtr-column > tbody > tr > td.dtr-control:hover:before,
table.dataTable.dtr-column > tbody > tr > th.dtr-control:hover:before,
table.dataTable.dtr-column > tbody > tr > td.control:hover:before,
table.dataTable.dtr-column > tbody > tr > th.control:hover:before {
    background-color: #1577ae;
}
table.dataTable.dtr-column > tbody > tr.parent td.dtr-control:before,
table.dataTable.dtr-column > tbody > tr.parent th.dtr-control:before,
table.dataTable.dtr-column > tbody > tr.parent td.control:before,
table.dataTable.dtr-column > tbody > tr.parent th.control:before {
    content: "\2212";
    background-color: #1C95DA;
}

/* ---- Lo que el "+" abre: la fila hija ------------------------------------ */
/*
 * Las tablas de la app llevan la clase `nowrap` para que la extensión `responsive` mida
 * bien qué columna cabe. Pero la regla de la librería es
 *
 *     table.dataTable.nowrap th, table.dataTable.nowrap td { white-space: nowrap }
 *
 * y eso es un selector de DESCENDIENTE: alcanza también a la celda de la fila hija, que es
 * justo donde va a parar lo que NO cabía. Resultado: el contenido que se despliega se pone
 * en una sola línea y desborda la tarjeta a lo ancho, con su scroll lateral. Se vio en
 * /mis-retiradas (466 px de contenido en una tarjeta de 390) y le pasa igual a cualquier
 * vista que combine `responsive` con `nowrap`, que son todas.
 *
 * Dentro de la fila hija no hay ancho que ganar: ahí el texto tiene que fluir.
 */
table.dataTable.nowrap > tbody > tr.child td,
table.dataTable.nowrap > tbody > tr.child th {
    white-space: normal;
}

/* Y un valor largo SIN espacios (una referencia de Stripe, un identificador) no rompe por
   sí solo: si no se le deja partir, empuja igual que el nowrap. */
table.dataTable > tbody > tr.child .dtr-data {
    overflow-wrap: anywhere;
}